scss基本语法使用

scss基本语法简单使用

---

前言

CSS书写代码规模较大的Web应用时，容易造成选择器、层叠的复杂度过高，因此推荐通过SASS预处理器进行CSS的开发。
CSS预处理器：为css加入编程元素。

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、what is scss？

Sass 是一款强化 CSS 的辅助工具，它在 CSS 语法的基础上增加了变量 (variables)、嵌套 (nested rules)、混合 (mixins)、导入 (inline imports) 等高级功能，这些拓展令 CSS 更加强大与优雅。
它是基于ruby开发的。

二、安装

这里只是学习scss的用法，并不把所有语法都学完，所以并不安装ruby。

• vscode 安装live-sass插件即可 再settings.json中加入

"liveSassCompile.settings.formats": [
        // 扩展
        {
            "format": "compact", //可定制的出口CSS样式（expanded，compact，compressed，nested）
            "extensionName": ".min.css", //编译后缀名
            "savePath": "~/../minCSS/" //编译保存的路径
        }
    ],
    "liveSassCompile.settings.excludeList": [
        "**/node_modules/**",
        ".vscode/**"
    ],

使用在右下角点watching即可

• vue2.x

vue-cli 2.96 它已经对sass进行了预处理了，你需要npm一下就行

    // https://vue-loader.vuejs.org/en/configurations/extract-css.html
    return {
        css: generateLoaders(),
        postcss: generateLoaders(),
        less: generateLoaders('less'),
        sass: generateLoaders('sass', { indentedSyntax: true }),
        scss: generateLoaders('sass'),
        stylus: generateLoaders('stylus'),
        styl: generateLoaders('stylus')
    }

所以只须

npm install -D sass-loader sass
注意sass-loader 版本要低于8,比如7.3.0，不然各种报错

• vue3.x以上，vue/cli 4.5.15 同理
  这里有奇奇怪怪的问题，有空再研究一下，再回来写

三、基本语法

1.变量

sass 能用变量是它的一大优点。

• 变量声明：$ (老版！）

$highlight-color: #F90;
.first {
    height: 100px;
    background-color: $highlight-color;
}

后面相同变量声明覆盖前面声明

• 变量使用

1. {}作用块外定义 都可以使用包括嵌套的

scss

$highlight-color: #F90;
.first {
    height: 100px;
    width: 100px;
    background-color: pink;
    .son {
        height: 50px;
        width: 50px;
        background-color: $highlight-color;
    }
}

css

.first { height: 100px; width: 100px; background-color: pink; }

.first .son { height: 50px; width: 50px; background-color: #F90; }

2. 规则{}里面外面就不可用，跟jvascript作用域差不多
3. 作用在属性名中，需要在#{}里面

$side:left;
.second {
    height: 100px;
    width: 100px;
    background-color: blue;
    margin-#{$side}: 100px;
}

4. 可以在变量声明中使用变量

$side:left;
$border:1px solid $highlight-color;

5. 一般情况下命名 _ 和-可以相等

2.嵌套

• 正常嵌套像上面一样即可
• 特殊嵌套

1. 属性也可以嵌套

div {
　　　　hi {
　　　　　　color:red;
　　　　}
　　}

nav {
  border: {
  style: solid;
  width: 1px;
  color: #ccc;
  }
}

2. 用&引用父元素

.first {
    width: 100%;
    height: 100px;
    a {
        width: 100px;
        height: 50px;
        background-color: pink;
        &:hover {
            background-color: blue;
        }
    }
}

3. 群组选择器（并集选择器，大家共用一套声明）

.second {
    h1,
    h2,
    h3 {
        color: pink;
    }
}

nav, aside {
  a {color: blue}
}

//
nav a, aside a {color: blue}

4. 子组合选择器和同层组合选择器：>、+和~

• 子代选择器 > 这个基本不变
• 同层相邻组合选择器+选择header元素后紧跟的p元素

    <div class="header">

        <div>
            <p>1.1111</p>
        </div>
    </div>
    <p>1</p>
    <p>2</p>
    <p>3</p>
    
    .header+p {
    color: pink;
}

• 同层全体组合选择器~ 与+一样写法
• 嵌套写法

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

3.@mixin @include

混合器，相当于js的mixin函数，把样式混合到选择器中。

@mixin mixinTest {
    height: 200px;
}

.one {
    width: 100px;
    height: 100px;
    background-color: aqua;
    @include mixinTest()
}

结果：

.one { width: 100px; height: 100px; background-color: aqua; height: 200px; }

• 所以@mixin 就是一个函数，返回一个样式{}，把里面的东西放在@include()位置，按照css的覆盖法则，该干干嘛。
• 给mixin 传参

$name:red;
@mixin toRed($name) {
    background-color: $name;
}

.two {
    width: 300px;
    height: 300px;
    @include toRed($name)
}

• 指定参数值

@mixin toArgs($name1, $name2) {
    background-color: $name1;
    width: $name2;
}

.three {
    height: 100px;
    @include toArgs($name2: 100px, $name1: blue)
}

.three { height: 100px; background-color: blue; width: 100px; }

4.函数

分类：

• 内置函数（下篇再记录）
• 自定义函数

	@function double($n) {
　　　　@return $n * 2;
　　}

　　#sidebar {
　　　　width: double(5px);
　　}

5.继承 extend

允许一个选择器，继承另一个选择器

　.selector2 {
　　　　@extend .selector1;
　　　　font-size:120%;
　　}

.parent {
    width: 100px;
    height: 100px;
    background-color: pink;
}

.son {
    @extend .parent;
    height: 200px;
}

• 默认参数

@mixin toDefault( $dcolor:green, $dwidth:100px) {
    background-color: $dcolor;
    width: $dwidth;
}

.four {
    height: 100px;
    @include toDefault()
}

.four { height: 100px; background-color: green; width: 100px; }

6.引入

• 可以通过@import 导入.scss文件，可以省略后缀.scss
• 因为与css的导入一样，所以需要区分，以下情况下，@import 仅作为普通的 CSS 语句，不会导入任何 Sass 文件

1. 文件拓展名是 .css；
2. 文件名以 http:// 开头；
3. 文件名是 url()；
4. @import 包含 media queries。

• 局部文件

如果需要导入 SCSS 或者 Sass 文件，但又不希望将其编译为 CSS，
只需要在文件名前添加下划线，这样会告诉 Sass 不要编译这些文件，
但导入语句中却不需要添加下划线。

例如，将文件命名为 _colors.scss，便不会编译 _colours.css 文件。
@import "colors";

• 允许嵌套规则里面导入

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

• 默认变量值
  一般情况下，你反复声明一个变量，只有最后一处声明有效且它会覆盖前边的值，
  导入同理，声明后导入，会覆盖
  myscss.scss

$bigColor:pink

user.scss

$bigColor:blue;
@import '../scss/myscss.scss';
.user {
    color: $bigColor;
}

结果：

.user { color: pink; }

假设我的库myscss.scss 我想让导入的用户修改样式，就可以在库中使用!default,
官

方描述：如果这个变量被声明赋值了，那就用它声明的值，否则就用这个默认值。

$bigColor:pink !default

这个时候上面user.scss导入不会覆盖$bigColor，而是使用导入的scss。

简单来说：用户定义的变量与导入的.scss变量一致，且用户变量声明在前，导入变量会覆盖变量。
所以设计库的时候用!default让用户变量优先。

7.注释

1. // 保留到.scss中
2. /*xxx*/ 保留到.css
3. /*！mmm*/ 即使压缩模式也保留

---

剩下 运算，各种内置函数，变量类型，各种指令，下篇学了，乏了：）