Sass语法

叁歲伎倆 2022-05-28 14:13 243阅读 0赞

**Sass简介**

*  一种css的预处理器
 *  Sass扩展了css3，增加了规则，变量，混入，选择器，继承等的特性
 *  Sass生成良好的格式化的css代码，易于组织和维护

--------------------

**Sass环境搭建**

*  准备ruby环境—sass用ruby语言写的  
    [http://rubyinstaller.org/downloads][http_rubyinstaller.org_downloads]  
    建议下载最新版本
 *  通过ruby安装sass
 *  gem install sass  
    可能需要先安装haml组件（gem install haml）
 *  webstorm添加sass监视  
    添加后可自动编译sass文件

--------------------

**sass特性**

*  他的后缀名.sass使用严格的语法，不使用大括号和分号
 *  .scss使用大括号和分号，与less基本相同
 *  推荐使用最后一种格式

--------------------

**sass语法特性**  
• 变量  
– sass中可以定义变量，方便统一修改和维护。  
• 嵌套  
– sass可以进行选择器的嵌套，表示层级关系。  
• 导入  
– sass中如导入其他sass文件，最后编译为一个css  
– @import “路径/file1.scss”,”路径/file2.scss”  
• mixin混合  
– sass中可用mixin定义一些代码片段，且可传参数  
• 扩展/继承  
– sass可通过@extend来实现代码组合声明，使代码更加优越简洁  
• 函数  
– sass内置大量函数，简化了操作。

--------------------

**sass语法–注释**  
• sass有两种注释方式，一种是标准的css注释方式/\* \*/，另一种则是//双斜杆形式的单行注释，不过这种单行注释不会被转译出来

--------------------

**sass语法–变量**

*  sass的变量定义格式：$变量名：属性值；
 *  默认变量： sass的默认变量仅需要在值后面加上!default即可。
 *  特殊变量：如果变量作为属性则必须要以\#\{$variables\}形式使用。
 *  全局变量：–在变量值后面加上!global即为全局变量。

--------------------

**sass语法–嵌套**

*  选择器嵌套：– 所谓选择器嵌套指的是在一个选择器中嵌套另一个选择器来实现继承，从而增强了sass文件的结构性和可读性。  
    – 在选择器嵌套中，可以使用&表示父元素选择器
 *  属性嵌套：– 所谓属性嵌套指的是有些属性拥有同一个开始单词，如border-width，border-color都是以border开头

--------------------

**sass语法–混合**  
• sass中使用@mixin声明混合  
– 可以传递参数，参数名以$符号开始  
– 多个参数以逗号分开，也可以给参数设置默认值。  
– 声明的@mixin通过@include来调用。

*  @mixin：如果没有参数，小括号可以省略  
    多个参数用逗号隔开

--------------------

**sass语法–继承**

*  基础继承：使用关键字@extend，后面紧跟需要继承的选择器
 *  占位选择器%  
    – 一般用来定义基础样式  
    – 如果不被继承，就不会被解析

--------------------

**sass语法–运算及其判断**

*  运算：– 数值型的Value (如：数字、颜色、变量等)可进行加减乘除四则运算  
    – 注意运算符前后请留一个空格，不然会出错。
 *  @if判断：@if可一个条件单独使用，也可以和@else结合多条件使用 @if(条件)\{\}@else\{\}
 *  三目判断：– 语法为：if(condition,  c o n d i t i o n , if\_true, $if\_false) 。
 *  for循环：  
    – @for varfromthrough–@for  v a r f r o m t h r o u g h – @ f o r var from to 。  
    – $i表示变量，start表示起始值，end表示结束值  
    – 关键字through（>=）表示包括end这个数，而to（>）则不包括end这个数。

[http_rubyinstaller.org_downloads]: http://rubyinstaller.org/downloads