Sass语法(一)基本用法

本是古典何须时尚 2021-09-14 04:28 484阅读 0赞

# 一、基本用法 #

## 1 .变量-(声明变量的符号“$”,变量名称,赋予变量的值) ##

![20170904153010854][]

### ①普通变量 ###

//scss  
$width : 10px;     
.meng \{    
    width : $width;    
\}    
  
//编译后的CSS代码  
.meng \{    
  width: 20px;    
\}

### ②默认变量-(!default ) ###

在日常编辑过程中，可以给变量添加默认值(!default)标志。如果在其变量值没有单独设定，那么就用添加默认值的变量值。若设定了，那么就用重新设定的变量值。如下

![20170904160725493][]

### ③声明多个变量 ###

变量可以一个一个的声明，也可以多个一起声明。多个一起声明，用起来是比较方便的，特别是声明相似功能的变量。

![20170904160938036][]

### ④全局变量和局部变量 ###

a.全局变量就是定义在元素外面的变量

b.局部变量只会在局部范围内覆盖全局变量

//SCSS $color: orange !default;//定义全局变量(在选择器、函数、混合宏...的外面定义的变量为全局变量) .block { color: $color;//调用全局变量 } em { $color: red;//定义局部变量 a { color: $color;//调用局部变量 } } span { color: $color;//调用全局变量 }

$color 就是一个全局变量，而定义在元素内部的变量，比如 $color:red; 是一个局部变量。

## 2.插值应用-(  \#\{\}  ) ##

变量不仅可以用在属性值，还可以用在选择器或者是属性上面。下面是变量使用在选择器上的小实例$class : meng;    
   
//　ScSS代码   
.\#\{$class\} \{    
    width : 20px;    
\}    
//编译后的CSS代码  
.meng \{    
  width: 20px;    
\}

## 3. 计算功能 ##

对于携带不同类型的单位时，在Sass中计算会报错；两个值单位相同时，只需要为一个数值提供单位即可。

### ①加减乘运算 ###

$full-width: 500px;  
$sidebar-width: 200px;  
.content \{  
  min-width: $full-width -  $sidebar-width;//300px减法  
  max-width: $full-width +  $sidebar-width;//700px加法  
  width: 10px\*2//20px乘法  
\}

### ②除法运算 ###

”/  ”符号被当作除法运算符时有以下几种情况：  
•    如果数值或它的任意部分是存储在一个变量中或是函数的返回值。  
•    如果数值被圆括号包围。  
•    如果数值是另一个数学表达式的一部分。

如下所示：
    
    //SCSS
    p {
      font: 10px/8px;             // 纯 CSS，不是除法运算
      $width: 1000px;
      width: $width/2;            // 使用了变量，是除法运算
      width: round(1.5)/2;        // 使用了函数，是除法运算
      height: (500px/2);          // 使用了圆括号，是除法运算
      margin-left: 5px + 8px/2px; // 使用了加（+）号，是除法运算
    }

### ③颜色运算 ###

a.颜色间运算  
p \{  
  color: \#010203 + \#040506;  
\}  
计算公式为 01 + 04 = 05、02 + 05 = 07 和 03 + 06 = 09， 并且被合成为：  
  
如此编译出来的 CSS 为：  
p \{  
  color: \#050709;  
\}  
  
b.数字与颜色间运算  
算数运算也能将数字和颜色值 一起运算，同样也是分段运算的。如：  
p \{  
  color: \#010203 \* 2;  
\}  
计算公式为 01 \* 2 = 02、02 \* 2 = 04 和 03 \* 2 = 06， 并且被合成为：  
  
p \{  
  color: \#020406;  
\}

### ④字符运算 ###

$content: "Hello" + "" + "Sass!";  
.box:before \{  
  content: " \#\{$content\} ";  
  cursor: e + -resize;  
\}

编译出来的CSS：  
  
.box:before \{  
  content: " Hello Sass! ";  
  cursor: e -resize;  
\}

## 4. 嵌套 ##

### ①选择器嵌套 ###

div h1 { 　　　　color : red; 　　} //可以写成： 　　div { 　　　　hi { 　　　　　　color:red; 　　　　} 　　} //属性也可以嵌套，比如border-color属性，可以写成： 　　p { 　　　　border: { 　　　　　　color: red; 　　　　} 　　}//注意，border后面必须加上冒号。

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

a { 　　　　&:hover { color: #ffb3ff; } 　　}

### ②属性嵌套 ###

CSS 有一些属性前缀相同，只是后缀不一样，比如：border-top/border-right，与这个类似的还有 margin、padding、font 等属性

.box \{  
  font: \{  
   size: 12px;  
   weight: bold;  
  \}    
\}  
编译css:  
.box \{  
     font-size: 12px;  
     font-weight: bold;  
\}

### ③伪类嵌套 ###

其实伪类嵌套和属性嵌套非常类似，只不过他需要借助\`&\`符号一起配合使用。我们就拿经典的“clearfix”为例吧  
编译出来的 CSS：

.clearfix{ &:before, &:after { content:""; display: table; } &:after { clear:both; overflow: hidden; } }

编译出来的 CSS： clearfix:before, .clearfix:after { content: ""; display: table; } .clearfix:after { clear: both; overflow: hidden; }

### ④注意 ###

避免选择器嵌套：

a.选择器嵌套最大的问题是将使最终的代码难以阅读。开发者需要花费巨大精力计算不同缩进级别下的选择器具体的表现效果。  
b.选择器越具体则声明语句越冗长，而且对最近选择器的引用(&)也越频繁。在某些时候，出现混淆选择器路径和探索下一级选择器的错误率很高，这非常不值得。

## 5. 注释 ##

SASS共有两种注释风格。

标准的CSS注释 / *comment*/ ，会保留到编译后的文件。

单行注释 // comment，只保留在SASS源文件中，编译后被省略。

在/\*后面加一个感叹号，表示这是"重要注释"。即使是压缩模式编译，也会保留这行注释，通常可以用于声明版权信息。

/*! 　　　　重要注释！ */

##     ##

# 二、代码的重用 #

## 1 .继承 ##

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

.class1 \{  
　　　　border: 1px solid \#ddd;  
　　\}  
class2要继承class1，就要使用@extend命令：  
.class2 \{  
　　　　@extend .class1;  
　　　　font-size:120%;  
　　\}

## 2. 混合宏@Mixin ##

### ①声明混合宏 ###

使用“@mixin”来声明

a.不带参数声明

其中 @mixin 是用来声明混合宏的关键词，有点类似 CSS 中的 @media、@font-face 一样。border-radius 是混合宏的名称。大括号里面是复用的样式代码。

@mixin border-radius\{  
    -webkit-border-radius: 5px;  
    border-radius: 5px;  
\}

b.带参数声明

@mixin border-radius($radius:5px)\{  
    -webkit-border-radius: $radius;  
    border-radius: $radius;  
\}

c.复杂的混合宏

在大括号里面写上带有逻辑关系（@if...@else），帮助更好的做你想做的事情

@mixin box-shadow($shadow...) \{  
  @if length($shadow) >= 1 \{  
    @include prefixer(box-shadow, $shadow);  
  \} @else\{  
    $shadow:0 0 4px rgba(0,0,0,.3);  
    @include prefixer(box-shadow, $shadow);  
  \}  
\}

### ②调用混合宏 ###

通过 @mixin 关键词声明了一个混合宏，那么在实际调用中，其匹配了一个关键词“@include”来调用声明好的混合宏。

@mixin border-radius\{  
    -webkit-border-radius: 3px;  
    border-radius: 3px;  
\}  
button \{  
    @include border-radius;  
\}

### ③混合宏的参数 ###

a.传一个不带值的参数

//定义了一个不带任何值的参数“$radius”  
@mixin border-radius($radius)\{  
  -webkit-border-radius: $radius;  
  border-radius: $radius;  
\}  
//在调用的时候可以给这个混合宏传一个参数值：  
.box \{  
  @include border-radius(3px);  
\}

b.传一个带值的参数

//定义了一个带值的参数“$radius”  
@mixin border-radius($radius:3px)\{  
  -webkit-border-radius: $radius;  
  border-radius: $radius;  
\}  
  
//只需要调用默认的混合宏“border-radius”:  
.btn \{  
  @include border-radius;  
\}  
  
编译出来的 CSS:  
  
.box \{  
  -webkit-border-radius: 3px;  
  border-radius: 3px;  
\}  
  
但有的时候，页面中有些元素的圆角值不一样，那么可以随机给混合宏传值，如：  
  
.box \{  
  @include border-radius(50%);  
\}  
编译出来的 CSS:  
  
.box \{  
  -webkit-border-radius: 50%;  
  border-radius: 50%;  
\}

c.传多个参数

多个参数。在实际调用和其调用其他混合宏是一样的：

//定义  
@mixin center($width,$height)\{  
  width: $width;  
  height: $height;  
\}  
//调用  
.box-center \{  
  @include center(500px,300px);  
\}  
  
  
编译出来 CSS:  
.box-center \{  
  width: 500px;  
  height: 300px;  
\}  
  
注意：  
  有一个特别的参数“…”。当混合宏传的参数过多之时，可以使用参数来替代  
如：  
@mixin box-shadow($shadow...) \{  
  @if length($shadow) >= 1 \{  
    @include prefixer(box-shadow, $shadow);  
  \} @else\{  
    $shadow:0 0 4px rgba(0,0,0,.3);  
    @include prefixer(box-shadow, $shadow);  
  \}  
\}

### ④混合的不足 ###

其最大的不足之处是会生成冗余的代码块。比如在不同的地方调用一个相同的混合宏时。如：

//scss @mixin border-radius{ -webkit-border-radius: 3px; border-radius: 3px; } .box { @include border-radius; margin-bottom: 5px; } .btn { @include border-radius; }

看编译出来的 CSS： .box { -webkit-border-radius: 3px; border-radius: 3px; margin-bottom: 5px; } .btn { -webkit-border-radius: 3px; border-radius: 3px; }

## 3.占位符%placeholder ##

通过 @extend 调用的占位符，编译出来的代码会将相同的代码合并在一起。这也是我们希望看到的效果，也让你的代码变得更为干净。

//SCSS  
%mt5 \{  
  margin-top: 5px;  
\}  
%pt5\{  
  padding-top: 5px;  
\}  
  
  
.btn \{  
  @extend %mt5;  
  @extend %pt5;  
\}  
  
  
  
  
编译出来的CSS  
  
  
//CSS  
.btn, .block \{  
  margin-top: 5px;  
\}  
  
  
.btn, .block span \{  
  padding-top: 5px;  
\}

## 3.混合宏 VS 继承 VS 占位符 ##

a.如果你的代码块中涉及到变量，建议使用混合宏来创建相同的代码块。  
b.如果你的代码块不需要专任何变量参数，而且有一个基类已在文件中存在，那么建议使用 Sass 的继承。

![Center][]

##     ##

## 4.插入文件 ##

@import命令，用来插入外部文件。

@import "path/filename.scss";

如果插入的是.css文件，则等同于css的import命令。

@import "foo.css";

[20170904153010854]: /images/20210813/1bb441a815104489aef3e10431b14b99.png
[20170904160725493]: /images/20210813/d7038fd8a6194c6c82756c626ffdc7c9.png
[20170904160938036]: /images/20210813/1a51ca510a884373be1008b6a753cfa5.png
[Center]: /images/20210813/69c11df72cf04b60a69bf09689abe8b5.png