scss安装_scss

什么是sass

Sass 是一种动态的CSS(预解析的css)，它扩展了 CSS 语法，目的是为了让 CSS 更容易维护。另外还有些叫less和Stylus  这里以讲解Sass为例。

Sass 扩展了 css 的特性：

• 变量声明

• 嵌套规则

• @import导入样式

• @include混合器中的CSS规则，给混合器传参

• @extends继承

• @if、@each、@for、@function

• ...

Sass和Scss的关系

Sass 有两种语法，最常用是的 SCSS(Sassy CSS)，是 CSS3 的超集。另一个语法是 SASS，这是之前较老的写法，很少使用。

Sass的写法缩进语法，对于写惯css前端的人员来说很不适应(别扭)，也不能将css代码加入到Sass里面，因此sass语法进行了改良，Sass 3就变成了Scss(sassy css)。与原来的语法兼容，只是用{}取代了原来的缩进。

sass:

body    background-color:red;    font-size:16px;

scss:

body{    background-color:red;    font-size:16px; }

scss官网语法参考：https://www.sass.hk/guide/  https://www.sass.hk/docs/

通过一些编译工具如Koala可以将sass转化为css，因为浏览器最终只能识别css文件中的样式。

变量声明

注：以下都是采用scss语法编写sass

变量无疑为 CSS 增加了一种有效的复用方式，减少了原来在 CSS 中无法避免的重复。(硬编码)

变量以美元符号开头，赋值方法与 CSS 属性的写法一样：

SCSS:

$color:blue;    //定义变量  #box{       width:300px;       background-color: $color;  }

编译成CSS如下：

  #box{       width:300px;       background-color:blue;  }

Live Sass编译器

它是VSCode扩展，可通过实时浏览器重新加载来帮助您实时将SASS / SCSS文件编译/转换为CSS文件。

启动监听watching...

后续保存后，实现自动转化。

也可安装kaola工具进行自动转换。

如果是less可以安装easy less进行转换

sacc和less基本配置：

{    "window.zoomLevel": 2,    "files.autoSave": "afterDelay",    "workbench.sideBar.location": "right",    "terminal.integrated.shell.windows": "C:\\Windows\\System32\\cmd.exe",    "liveSassCompile.settings.formats": [        {          "format": "expanded",          "extensionName": ".css",          "savePath": "./css/"        },        {            "format": "compact",            "extensionName": ".min.css",            "savePath": "./css/"        }    ],    "less.compile": {        "compress": true, // 是否删除多余空白字符        "sourceMap": false, // 是否创建文件目录树，true的话会自动生成一个 .css.map 文件        "out": "./css/", // 是否输出css文件，false为不输出        "outExt": ".css", // 输出文件的后缀,默认为.css 或 .wxss    }}

还可以通过后面学习的打包工具如：gulp、webpack也可以将scss或less编译转化成浏览器可以识别的css。

嵌套规则

Sass 允许将一套 CSS 样式嵌套进另一套样式中，内层的样式将它外层的选择器作为父选择器。

SCSS：

#box{  width:100px;  height:100px;  h1{        text-align:center;  }  span{        font-size:16px;        a{             color:blue        }  }}

编译成CSS如下：

#box {    width: 100px;    height: 100px;}#box h1 {    text-align: center;}#box span {    font-size: 16px;}#box span a {    color: blue;}

可见，通过嵌套写法可以减少重复的代码，也更易于维护。

当在嵌套中定义了变量时，变量只在当前块({})及其子块中有效。

父元素选择器&

SCSS:

 a{    background-color:red;    &:hover{        font-size:60px;    }  }

编译成CSS如下：

a {    background-color: red;}a:hover {    font-size: 60px;}

@import导入样式  

定义一个样式，如 blue-theme.scss,内容如下

span{    color:blue;}

使用@import 文件名 进行导入：

  div{        width:100px; // 这是宽度 scss不可见        height:200px; /* 这是高度scss可见 */        @import "blue-theme.scss";    }

编译成CSS如下：

div{     width:100px; // 这是宽度 scss不可见 height:200px; /* 这是高度scss可见 */     span{     color:blue;    }}

混合器(宏)css规则

SCSS:

@mixin no-bullets {  list-style: none;  li {    list-style-image: none;    list-style-type: none;    margin-left: 0px;  }}ul.plain {  color: #444;  @include no-bullets;}

编译成CSS如下：

ul.plain {    color: #444;    list-style: none;}ul.plain li {    list-style-image: none;    list-style-type: none;    margin-left: 0px;}

给混合器css传参

SCSS:

@mixin link-colors($normal, $hover, $visited) {  color: $normal;  &:hover { color: $hover; }  &:visited { color: $visited; }}a {  @include link-colors(blue, red, green);}

编译成CSS如下：

a {    color: blue;}a:hover {    color: red;}a:visited {    color: green;}

@extend继承css样式

使用sass的时候，最后一个减少重复的主要特性就是选择器继承

SCSS:

.error {  border: 1px solid red;  background-color: #fdd;}.seriousError {  @extend .error;  border-width: 3px;}

编译成CSS如下：

.error, .seriousError {  border: 1px solid red;  background-color: #fdd;}.seriousError {  border-width: 3px;}

@if、@each、@for、@function逻辑

一张图说明，看scss转化成css:

• 重点掌握两种：1、变量  2、嵌套  3、导入@import