sass的快速入门与使用

栗子同学lz

已于 2022-11-21 15:20:59 修改

阅读量325

点赞数

分类专栏：笔记文章标签： sass css 前端

于 2022-11-21 15:20:20 首次发布

原文链接：https://www.sass.hk/guide/

版权

笔记专栏收录该内容

18 篇文章 0 订阅

订阅专栏

sass

引用地址：https://www.sass.hk/guide/

1、历史

sass是css预处理语言（也是对应的文件后缀名），语法功能比css更强大。

预处理语言：开发时用预处理语言，在打包上显示，用webpack和loader工具转换成css（Cascading Style Sheets ）给浏览器使用。

后缀名： sass是Syntactically Awesome StyleSheets ，版本3.0之前的后缀名为.sass，在3.0之后的后缀名为.scss

2、变量

sass引入了变量，可以把反复使用的css属性值定义成变量，然后通过变量名来引用它们。

sass使用$符号来表示变量（老版本使用的是!来标识，据说是因为太丑了就换掉了），用$可能是因为它好认、更具美感，且在CSS中并无他用，不会导致与现存或未来的css语法冲突。

2-1.变量声明和使用

任何可以用作CSS属性值的赋值都可以用作sass的变量值，还可以用空格分割的多个属性值，如$basic-border: 1px solid black; ，或用逗号分割多个属性值，如$plain-font: "Myriad Pro"、Myriad、"Helvetica Neue"、Helvetica、"Liberation Sans"、Arial和sans-serif; sans-serif; .

变量可以在css规则块之外存在，也可以定义在css规则块内。定义在css规则块内的变量只能在此规则块内使用。如果他们出现在任何形式的{ . . . }块中(如@media或者@font-face块)，情况也是如此：

$nav-color: #F90;
nav {
  $width: 100px;
  width: $width;
  color: $nav-color;
}

//编译后
nav {
  width: 100px;
  color: #F90;
}

注意：

变量名使用中划线和下划线代表同一变量，例如，
$link-color: blue;
a {
  color: $link_color;
}

2-2.嵌套CSS规则

在sass中可以使用选择器嵌套的模式进行书写。

#content {
  article {
    h1 { color: #333 }
    p { margin-bottom: 1.4em }
  }
  aside { background-color: #EEE }
}
  // 编译后
#content article h1 { color: #333 }
#content article p { margin-bottom: 1.4em }
#content aside { background-color: #EEE }

当使用伪类选择器的时候，上述嵌套模式就不适用了，sass推出&标识符代替父选择器

article a {
  color: blue;
  &:hover { color: red }
}
//编译后
article a { color: blue }
article a:hover { color: red }

3、导入SASS文件

css中有一个@import规则的特性，它允许在一个css文件中导入其他css文件。然后，后果是只有执行到@import时，浏览器才回去下载其css文件，这导致页面加载起来特别慢。

sass也有一个@import规则，但不同的是，sass的@import规则在生成css文件时就把相关文件导入进来。这意味着所有相关的样式被归纳到了同一个css文件中，而无需发起额外的下载请求。另外，所有再被导入文件中定义的变量和混合器均可在导入文件中使用。

使用sass的@import规则并不需要指明被导入文件的全名，可以省略文件后缀，这样，在不修改样式表的前提下，完全可以随意修改杯倒入的sass样式文件语法，在sass和scss语法之间随意切换。

3-1. 使用sass部分文件

当通过@import把sass样式分散到多个文件时，可能只想生成少数几个csswe年，1那些专门为@import命令而编写的sass文件，并不需要生成对应的独立css文件，这样的sass文件称为局部文件。对此，sass有一个特殊的约定来命名这些问价。

sass局部文件的文件名以下划线开头。这样，sass就不会再编译时单独编译这个文件输出css，而把这个文件用作导入。当你@import一个局部文件时，还可以不写文件的全名，及省略文件名开头的下划线。比如，想导入themes/_night-sky.scss这个局部文件里的变量，你只需在样式表中写@import "themes/night-sky";。

局部文件可以被多个不同的文件引用。

3-2. 默认变量值

一般情况下，反复声明一个变量，只有最后一处声明是有效的，且它会覆盖之前的值。

假如你写了一个可被他们通过@import导入的sass库文件，你可以希望导入者可以定制修改sass库文件中的某些值。使用sass的!default标签可以实现，它类似css属性中的!important的对立面，不同的是!default用于变量，含义是：如果这个变量被声明赋值了，那就用它声明的值，否则就用这个默认值。

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

在上例中，如果用户在导入你的sass局部文件之前声明了一个$fancybox-width变量，那么你的局部文件中对$fancybox-width赋值400px的操作就无效。如果用户没有做这样的声明，则$fancybox-width将默认为400px。

3-3. 选择器内导入sass局部文件

它允许只在某一个选择器的范围内导入sass局部文件。 sass允许@import命令写在css规则内。这种导入方式下，生成对应的css文件时，局部文件会被直接插入到css规则内导入他的地方，比如，有一个_blue-theme.scss的局部文件，内容如下：

aside {
  background: blue;
  color: white;
}

然后把它导入到一个CSS规则内，如下所示：

.blue-theme {@import "blue-theme"}

//生成的结果跟你直接在.blue-theme选择器内写_blue-theme.scss文件的内容完全一样。

.blue-theme {
  aside {
    background: blue;
    color: #fff;
  }
}

被导入的局部文件中定义的所有变量和混合器，也会在这个规则范围内生效。这些变量和混合器不会全局有效，这样我们就可以通过嵌套导入只对站点中某一特定区域运用某种颜色主题或其他通过变量配置的样式。

有时，可用css原生的@import机制，在浏览器中下载必需的css文件。sass也提供了几种方法来达成这种需求。