SASS(Syntactically Awesome Stylesheets Sass)绝对新手入门教程

本文主要是介绍SASS(Syntactically Awesome Stylesheets Sass)绝对新手入门教程,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

日期:2013-2-18  来源:GBin1.com

SASS(Syntactically Awesome Stylesheets Sass)绝对新手入门教程

什么是SASS?

SASS英文意思是Syntactically Awesome Stylesheets Sass,最早由Hampton Catlin开发和设计。SASS是一种帮助你简化CSS工作流程的方式,帮助你更容易的维和和开发CSS内容。

如果你不明白为什么用SASS,你可以先看看这篇文章 为什么需要将SASS和Compass融入CSS代码开发流程 - CSS编译器帮助你提高CSS开发效率和乐趣

最 简单的例子,你是不是经常需要使用“查询”和“替换”功能来修改CSS文件中某一个16进制的颜色?或者是打开一个计算器来计算多列设计中的列宽? SASS介绍了一个新的概念例如,variables,mixins,镶套或者是选择器继承。 从外形上看起来,非常像CSS,但是并没有分割号或者大括号。

看看下面这个简单的CSS:

#skyscraper_ad
{display: block;width: 120px;height: 600px; 
}#leaderboard_ad 
{display: block;width: 728px;height: 90px; 
}

如果你需要使用SASS,则如下代码:

#skyscraper_addisplay: blockwidth: 120pxheight: 600px#leaderboard_ad display: blockwidth: 728pxheight: 90px

SASS使用双空格的缩进来定义代码镶套结构。这里你可以大体的了解SASS的样子,下面我们将介绍为什么SASS如此的棒!

如果你需要更多了解SASS,可以查看这篇内容为什么需要将SASS和Compass融入CSS代码开发流程。

变量

在SASS中使用美元符号定义一个变量,在这个例子里,一个美元自负,变量名字加上一个冒号定义一个变量。

........

来源:SASS(Syntactically Awesome Stylesheets Sass)绝对新手入门教程

这篇关于SASS(Syntactically Awesome Stylesheets Sass)绝对新手入门教程的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/952496

相关文章

Vue项目的甘特图组件之dhtmlx-gantt使用教程和实现效果展示(推荐)

《Vue项目的甘特图组件之dhtmlx-gantt使用教程和实现效果展示(推荐)》文章介绍了如何使用dhtmlx-gantt组件来实现公司的甘特图需求,并提供了一个简单的Vue组件示例,文章还分享了一... 目录一、首先 npm 安装插件二、创建一个vue组件三、业务页面内 引用自定义组件:四、dhtmlx

MySQL zip安装包配置教程

《MySQLzip安装包配置教程》这篇文章详细介绍了如何使用zip安装包在Windows11上安装MySQL8.0,包括下载、解压、配置环境变量、初始化数据库、安装服务以及更改密码等步骤,感兴趣的朋... 目录mysql zip安装包配置教程1、下载zip安装包:2、安装2.1 解压zip包到安装目录2.2

Java使用Tesseract-OCR实战教程

《Java使用Tesseract-OCR实战教程》本文介绍了如何在Java中使用Tesseract-OCR进行文本提取,包括Tesseract-OCR的安装、中文训练库的配置、依赖库的引入以及具体的代... 目录Java使用Tesseract-OCRTesseract-OCR安装配置中文训练库引入依赖代码实

Ubuntu固定虚拟机ip地址的方法教程

《Ubuntu固定虚拟机ip地址的方法教程》本文详细介绍了如何在Ubuntu虚拟机中固定IP地址,包括检查和编辑`/etc/apt/sources.list`文件、更新网络配置文件以及使用Networ... 1、由于虚拟机网络是桥接,所以ip地址会不停地变化,接下来我们就讲述ip如何固定 2、如果apt安

PyCharm 接入 DeepSeek最新完整教程

《PyCharm接入DeepSeek最新完整教程》文章介绍了DeepSeek-V3模型的性能提升以及如何在PyCharm中接入和使用DeepSeek进行代码开发,本文通过图文并茂的形式给大家介绍的... 目录DeepSeek-V3效果演示创建API Key在PyCharm中下载Continue插件配置Con

Deepseek R1模型本地化部署+API接口调用详细教程(释放AI生产力)

《DeepseekR1模型本地化部署+API接口调用详细教程(释放AI生产力)》本文介绍了本地部署DeepSeekR1模型和通过API调用将其集成到VSCode中的过程,作者详细步骤展示了如何下载和... 目录前言一、deepseek R1模型与chatGPT o1系列模型对比二、本地部署步骤1.安装oll

在不同系统间迁移Python程序的方法与教程

《在不同系统间迁移Python程序的方法与教程》本文介绍了几种将Windows上编写的Python程序迁移到Linux服务器上的方法,包括使用虚拟环境和依赖冻结、容器化技术(如Docker)、使用An... 目录使用虚拟环境和依赖冻结1. 创建虚拟环境2. 冻结依赖使用容器化技术(如 docker)1. 创

Spring Boot整合log4j2日志配置的详细教程

《SpringBoot整合log4j2日志配置的详细教程》:本文主要介绍SpringBoot项目中整合Log4j2日志框架的步骤和配置,包括常用日志框架的比较、配置参数介绍、Log4j2配置详解... 目录前言一、常用日志框架二、配置参数介绍1. 日志级别2. 输出形式3. 日志格式3.1 PatternL

MySQL8.2.0安装教程分享

《MySQL8.2.0安装教程分享》这篇文章详细介绍了如何在Windows系统上安装MySQL数据库软件,包括下载、安装、配置和设置环境变量的步骤... 目录mysql的安装图文1.python访问网址2javascript.点击3.进入Downloads向下滑动4.选择Community Server5.

CentOS系统Maven安装教程分享

《CentOS系统Maven安装教程分享》本文介绍了如何在CentOS系统中安装Maven,并提供了一个简单的实际应用案例,安装Maven需要先安装Java和设置环境变量,Maven可以自动管理项目的... 目录准备工作下载并安装Maven常见问题及解决方法实际应用案例总结Maven是一个流行的项目管理工具