Sass/Scss 入门不慌

目录

1. 变量声明

2.嵌套选择器 

3.嵌套中的父级选择器

4.嵌套组合选择器

5.嵌套属性

6.注释

7.使用SASS部分文件

8.默认变量值

9.混合器（函数）

9.1 声明一个函数

9.2 给混合器传参

9.2 设置混合器的默认值

10.选择器继承

11.操作符

---

 所有 CSS3 语法在 SCSS 中都是通用的

Sass / Scss 区别

1. 变量声明

$highlight-color: #F90;

⚠️注意：SCSS中变量名使用中划线或下划线都是指向同一变量的！！

$highlight-color: #F90;

$highlight_color: #890;

最终生效值为#890

---

⚠️注意：css变量定义！！

• 规则块外定义===全局变量===可全局使用
• 规则块内定义===局部变量===只可规则块内使用

---

 举例：

$nav-color: #F90; // 规则块外
nav {
  $width: 100px; // 规则块内
  width: $width;
  color: $nav-color;
}
 
//编译后
 
nav {
  width: 100px;
  color: #F90;
}

2.嵌套选择器 

nav, aside {
  a {color: blue}
}
 
// 编译后：
nav a, aside a {color: blue}

3.嵌套中的父级选择器

SCSS提供了一个选择器可以选中当前元素的父元素，使用&表示

⚠️注意：只能在嵌套内部使用父级选择器（&），否则SCSS找不到父级元素会直接报错

/*scss*/
.container ul {
    &:after {
        display:block;
        content:"";
        clear:both;
    }
}
 
 
// 编译后
.container ul:after {
    display:block;
    content:"";
    clear:both;
}

4.嵌套组合选择器

在嵌套规则中可以写任何css代码，包括群组选择器（,），子代选择器（>），同层相邻组合选择器（+）、同层全体组合选择器（~）等等

article {
  ~ article { border-top: 1px dashed #ccc }
  > section { background: #eee }
  dl > {
    dt { color: #333 }
    dd { color: #555 }
  }
  nav + & { margin-top: 0 }
}
 
// 编译后：
article ~ article { border-top: 1px dashed #ccc }
article > footer { background: #eee }
article dl > dt { color: #333 }
article dl > dd { color: #555 }
nav + article { margin-top: 0 }

5.嵌套属性

嵌套属性的规则是这样的：把属性名从中划线-的地方断开，在根属性后边添加一个冒号:，紧跟一个{ }块，把子属性部分写在这个{ }块中

nav {
  border: 1px solid #ccc {
  left: 0px;
  right: 0px;
  }
}
 
 
// 编译后
nav {
  border: 1px solid #ccc;
  border-left: 0px;
  border-right: 0px;
}

6.注释

SCSS中的注释有两种

（1）/*注释*/:这种注释会被保留到编译后的css文件中。

（2）//注释:这种注释不会被保留到编译后生成的css文件中。

7.使用SASS部分文件

局部文件：专门为@import命令而编写的sass文件，并不需要生成对应的独立css文件，这样的sass文件称为局部文件

sass局部文件的文件名以下划线开头,这样 sass就不会在编译时单独编译这个文件输出css，而只把这个文件用作导入 (eg: _night-sky.scss)

// 当前是a.scss文件
 
@import "themes/_night-sky.scss";// 局部文件
@import "themes/night-sky";
 
 
// 两者上述作用相同，都是引入sass局部文件
 
//导入后，就可使用_night-sky中的变量

8.默认变量值

!default 仅用于变量

含义是：如果这个变量被声明赋值了，那就用它声明的值，否则就用这个默认值

// scss
$fancybox-width: 400px !default;
.fancybox {
    width: $fancybox-width;
}

9.混合器（函数）

使用混合器把样式中的通用样式抽离出来，然后轻松地在其他地方重用

（判断一组属性是否应该组合成一个混合器，一条经验法则就是你能否为这个混合器想出一个好的名字。如果你能找到一个很好的短名字来描述这些属性修饰的样式，比如rounded-cornersfancy-font或者no-bullets，那么往往能够构造一个合适的混合器。如果你找不到，这时候构造一个混合器可能并不合适）

9.1 声明一个函数

混合器使用@mixin标识符定义

@mixin rounded-corners {
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}
 
//使用函数的关键字为@include
.notice {
  background-color: green;
  border: 2px solid #00aa00;
  @include rounded-corners;
}
 
 
//编译后：
.notice {
  background-color: green;
  border: 2px solid #00aa00;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}

9.2 给混合器传参

可以通过在@include混合器时给混合器传参，来定制混合器生成的精确样式

// 第一种传参形式：需要确定参数顺序

// 第二种传参形式：通过语法$name: value的形式指定每个参数的值。 无需确定参数顺序，只要保证不漏掉参数就可以

@mixin link-colors($normal, $hover, $visited) {
  color: $normal;
  &:hover { color: $hover; }
  &:visited { color: $visited; }
}
 
// @include时，给混合器传参
// 第一种传参形式：需要确定参数顺序
a {
  @include link-colors(blue, red, green); // 需要确定参数顺序
}
 
// 第二种传参形式： 无需确定参数顺序，只要保证不漏掉参数就可以
a {
    @include link-colors(
      $normal: blue,  // 通过语法$name: value的形式指定每个参数的值
      $visited: green,
      $hover: red
  );
}
 
 
 
//Sass最终生成的是：
 
a { color: blue; }
a:hover { color: red; }
a:visited { color: green; }

9.2 设置混合器的默认值

@mixin get-border-radius($border-radius:5px,$color:red){
    -moz-border-radius: $border-radius;
    -webkit-border-radius: $border-radius;
    border-radius: $border-radius;
    color:$color;
}
。

10.选择器继承

选择器继承是说一个选择器可以继承为另一个选择器定义的所有样式

通过@extend语法实现继承

//通过选择器继承继承样式
.error {
  border: 1px solid red;
  background-color: #fdd;
}
.seriousError {
  @extend .error;
  border-width: 3px;
}
 
// 注意：.seriousError将会继承样式表中任何位置处为.error定义的所有样式
// 任何位置处

11.操作符

SCSS提供了标准的算术运算符，例如+、-、*、/、%

/*SCSS*/
width: 600px / 960px * 100%;
 
 
/*编译后的CSS*/
width: 62.5%;

参考文章：

Sass基础教程 Sass快速入门 Sass中文手册 | Sass中文网

scss快速入门 - 掘金