Sass（scss）常用语法记录

落日映苍穹つ 2021-10-06 02:28 437阅读 0赞

## **1. sass与scss区别** ##

SCSS 需要使用分号和花括号。

sass举例：
    		#sidebar
    		  width: 30%
    		  background-color: #faa
    scss举例：
    	   	#sidebar {
    			  width: 30%;
    			  background-color: #faa;
    		}

## **2. 变量（具有作用域）** ##

以 **$** 开头，后为变量名；

$red: #1875e7;　
    div {
    　color : $red;
    }

加 **!default**为默认值（使用之前变量已赋值，就不用默认值，如果没有，则使用默认值）

$content:"softwhy.com";
    $content: "antzone" !default;
    #main {
      content: $content;
    }

这时content值为softwhy.com。

## 3. 嵌套 ##

在嵌套的代码块内，可以使用 **&** 引用父元素。

div {
    　　hi {
    　　  color:red;
    　　}
    　　&:hover { 
    　　  color: #ffb3ff;
    　　}
    }

使用 **@at-root** 跳出选择器嵌套

.parent{
         @at-root .child{
           color: gray;
         }
       }
      编译结果为 
      .child{
         color: gray;
       }

## 4.继承 ##

使用 **@extend**命令：继承另外一个选择器所有的样式

.class1 {
    　　border: 1px solid #ddd;
    }
    .class2 {
    　　@extend .class1;
    　　font-size:120%;
    }

## 5.混合（mixin） ##

使用 **@mixin**命令，定义一个代码块。使用 **@include**命令进行调用。  
进行代码重用，可传递参数。

@mixin border($vert, $horz, $radius: 10px) { //radius默认值为10px
    　　border-#{$vert}-#{$horz}-radius: $radius;
    　　-moz-border-radius-#{$vert}#{$horz}: $radius;
    　　-webkit-border-#{$vert}-#{$horz}-radius: $radius;
    }
    #footer { @include border(top, left, 5px); }

## 6.运算 ##

1.  **条件语句（@if， @else）**

@if $value> 3 {
    　　background-color: #000;
    } @else {
    　　background-color: #fff;
    }

1.  **三目判断**  
    语法为：if($condition, $if\_true, $if\_false) 。  
    三个参数分别表示：条件，条件为真的值，条件为假的值。

$boolean:false;
    .border{
    	font-size:if($boolean,10px,20px)
    }

1.  **自定义函数**

@function double($n) {
    　　@return $n * 2;
    }
    #sidebar {
    　　width: double(5px);
    }

1.  **for循环，while循环，each循环**  
    [参考文档：http://www.ruanyifeng.com/blog/2012/06/sass.html][http_www.ruanyifeng.com_blog_2012_06_sass.html]

[http_www.ruanyifeng.com_blog_2012_06_sass.html]: http://www.ruanyifeng.com/blog/2012/06/sass.html