SASS用法指南

2021-07-06 本文已影响0人贤总_

一．Sass：

css预处理器，用一种专门的编程语言，进行网页样式设计，然后再编译成正常的CSS文件。（与其有类似功能的还有less）

（一）css与sass与scss之间的关系：

Sass(Syntactically Awesome Style Sheets) ,是一种css预处理器和一种语言, 它可以用来定义一套新的语法规则和函数，以加强和提升CSS. 它有很多很好的特性，但是它有类似Ruby的语法，没有花括号，没有分号，遵循严格的缩进，它在书写规则，变量命名方面和CSS代码有着很大的区别。

于是，后来官方在2010年推出了一个全新的语法，叫做SCSS, 意思是 Sassy CSS. 这个语法带来了对CSS友好的语法，试图弥合Sass和CSS之间的差别，是 Sass 3 引入新的语法，其语法完全兼容 CSS3，并且继承了 Sass 的强大功能。Sass 和 SCSS 其实是同一种东西，我们平时都称之为 Sass，两者之间不同之处有以下两点：

（1）文件扩展名不同，Sass 是以“.sass”后缀为扩展名，而 SCSS 是以“.scss”后缀为扩展名
（2）语法书写方式不同，Sass 是以严格的缩进式语法规则来书写，不带大括号({})和分号(;)，而 SCSS 的语法书写和我们的 CSS 语法书写方式非常类似。

二．Sass安装：

npm install -g sass / npm install sass

三．使用：

SASS文件就是普通的文本文件，里面可以直接使用CSS语法。文件后缀名是.scss，意思为Sassy CSS。

四．基本用法：

（一）sass嵌套-选择器嵌套

SASS 中的嵌套主要说的是选择器嵌套和属性嵌套两种方式，正常项目中通常使用的都是选
择器嵌套方案
【注】在嵌套的过程中，如果需要用到父元素，在 SASS 中通过&符号引用父属性
本来在css写，需要.content .list .item ,而在sass文件里，可以直接嵌套，如：

 .content{
     .list{
       .item{ 
           width:34px
        }
    }
}

即可编译成

.content .list .item{
    width:34px
}

在嵌套的代码块内，也可以使用&引用父元素。比如a:hover伪类，可以写成：

a {
　　&:hover { color:red; }
　}

其他伪类选择器还有：

动态伪类选择器（:link :visited :hover :active :focus）

:link：链接没有被访问时的效果（微信小程序不支持）
:hover：鼠标经过的效果（微信小程序不支持）
:visited：链接被访问后的效果（微信小程序不支持）
:active：鼠标点下去的效果（正发生在点的那一下）
:focus：获得焦点后的效果

状态伪类选择器（:enabeld :disabled :checked）

选择伪类选择器（:first-child :last-child :nth-child() :nth-last-child() :nth-of-type() :nth-last-of-type() :first-of-type :last-of-type :only-child :only-of-type）

:first-child：选择某个元素的第一个子元素（更确切的说为：选择第一个使用该属性的元素）
:last-child：选择某个元素的最后一个子元素（更确切的说为：选择最后一个使用该属性的元素）
:nth-child()：选择某个元素的一个或多个特定的子元素（参数从1开始）
:nth-last-child()：选择某个元素的一个或多个特定的子元素，从这个元素的最后一个子元素开始算
:nth-of-type()：选择指定的元素（参数从1开始）
:nth-last-of-type()：选择指定的元素，从元素的最后一个开始计算
:first-of-type：选择一个上级元素的第一个同类子元素
:last-of-type：选择一个上级元素的最后一个同类子元素
:only-child：选择的元素是它的父元素的唯一一个子元素
:only-of-type：选择一个元素是它的上级元素的唯一一个相同类型的子元素

空内容伪类选择器（:empty）：选择的元素里面没有任何内容

否定伪类选择器（:not）：不匹配该属性的每个元素（微信小程序不支持）

伪元素（::first-line ::first-letter ::before ::after ::selection）

::first-line：第一行
::first-letter：第一个字母
::selection：文本被选择（如复制时）后的效果，CSS只能修改background与color两个属性，微信小程序不支持

（二）变量：SASS允许使用变量，所有变量以$开头。

如：

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

如果变量需要镶嵌在字符串之中，就必须需要写在#{}之中。如：

$side : left;
.rounded {
　　border-#{$side}-radius: 5px;
}

一般可用在公用较多的颜色、单位等（主题色、设计图规范单位）

（三）计算功能

SASS允许在代码中使用算式，*变量与变量之间的运算只有乘除 * /，如：

body {
　　margin: (14px/2);
　　top: 50px + 100px;
　　right: $var * 10%;
}

（四）注释

SASS共有两种注释风格。

标准的CSS注释 /* comment */ ，会保留到编译后的文件。
单行注释 // comment，只保留在SASS源文件中，编译后被省略。
在/*后面加一个感叹号，表示这是"重要注释"。即使是压缩模式编译，也会保留这行注释，通常可以用于声明版权信息。

五.代码的复用

（一）继承

SASS允许一个选择器，继承另一个选择器。比如，现有class_first：

.class_first {
　　border: 1px solid #ddd;
}

class_sec要继承class_first，就要使用@extend命令：

.class_sec{
　　@extend .class_first;
　　font-size:120%;
}

（二）Mixin

Mixin是可以复用的代码块（建一个mixin.sass文件把重复较多的代码块写进去，后面引用文件复用(@import命令，用来插入外部文件)，或个性化复用也可以在页面定义后使用），步骤：
①使用@mixin命令，定义一个代码块。

@mixin center-flex {
　 display: flex;
    align-items: center;
    justify-content: center;
}

②使用@include命令，调用这个mixin。

div {
　@include center-flex ;
}

mixin还于可以指定参数和缺省值。如：

@mixin center-flex($value: center) {
　  display: flex;
    align-items: center;
    justify-content: $value;
}

使用的时候，根据需要加入参数：

div {
　@include center-flex(space-between) ;
}

一个mixin的实例，用来生成浏览器前缀:

@mixin rounded($vert, $horz, $radius: 10px) {
　　border-#{$vert}-#{$horz}-radius: $radius;
　　-moz-border-radius-#{$vert}#{$horz}: $radius;
　　-webkit-border-#{$vert}-#{$horz}-radius: $radius;
}

在使用的时候调用：

    #navbar li { @include rounded(top, left); }
　　#footer { @include rounded(top, left, 5px); }

混合器传参

@mixin link-colors($normal,$hover,$active){
a{color:$normal;}
a:hover{color:$hover;}
a:active{color:$active;}
}
//调用
a{@include link-colors(blue, red, green);}

当定义了混合器后调用时可能会忘记参数的意义和顺序，可以不按照参数排列的顺利，只要一个都不少即可。

（三）颜色函数

SASS提供了一些内置的颜色函数，以便生成系列颜色。

    lighten(#cc3, 10%) // #d6d65c  //变亮
　　darken(#cc3, 10%) // #a3a329   //变暗
　　grayscale(#cc3) // #808080  //灰度级
　　complement(#cc3) // #33c  //补充

六.高级用法

（一）@if可以用来判断：

p {
　　@if 1 + 1 == 2 { border: 1px solid; }
　　@if 5 < 3 { border: 2px dotted; }
}

配套的还有@else命令：

@if lightness($color) > 30% {
　　background-color: #000;
} @else {
　　background-color: #fff;
}

（二）循环语句

SASS支持for循环：

@for $i from 1 to 10 {
　　.border-#{$i} {
　　　　border: #{$i}px solid blue;
　　}
}

也支持while循环：

$i: 6;
@while $i > 0 {
　　.item-#{$i} { width: 2em * $i; }
　　$i: $i - 2;
}

each命令，作用与for类似：

　@each $member in a, b, c, d {
　　　　.#{$member} {
　　　　　　background-image: url("/image/#{$member}.jpg");
　　　　}
　　}

（三）自定义函数

SASS允许用户编写自己的函数。

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