Mo_Rijiu的博客

在编写响应式开发的过程中，常常使用媒体查询：而对于多条媒体查询，这种写法显得重复率较高，而合并的写法又不利于代码的阅读，因此可以通过结合 mixin 混入的方法实现媒体查询。其中， 指明了使用mixin处传过来的代码块，使用方法如下： 即实现了对 的替换同样地，根据之前的知识，mixin 可以接收参数，例如可以通过 接收传过来的高度值，再赋值给内部属性。完整代码如下：main.scss编译后 css 代码如下：— END —...

通过 css 编写“文本在一行内显示，如果超出一行则显示省略号”这样的需求时，编写的代码如下：对于上面的 text 和 content-text 两个类选择器，有部分共用的代码，所以最好对其进行抽离合并。在 scss 中，不能如之前所学的部分直接封装公共代码，这里引入 mixin 混入，方便对代码进行抽离。对抽离出来的命名为 singleline-ellipsis，在需要使用的代码内部通过 实现引入。当然，也可以单独形成一个文件，再通过 进行引入。此外，mixin 接收参数的传递，在使用时，可

在编写 scss 代码过程中，实际上完全可以和 css 写的一样，这样编译后代码也完全相同。demo.scss编译后的 demo.css而 scss 中提供选择器的嵌套书写方法，即可以直接在选择器内部编写子选择器。编译后如下：这样做的目的是为了避免多次重复地书写同一选择器举例如下：编译后如下：由此可见，两种方法得到的结果是一样的，但是嵌套写法可以减少祖先元素书写的次数，而且在修改时也更加方便，无需多次修改。对于如下的代码，变量中设置的颜色实际上可以看做主题色，相比于写在同一个文件中，更适合单

我们在编写 css 文件的时候，如果某几个元素的颜色相同，我们需要这样写：而在 Scss 中，可以通过定义变量来给属性赋值，举例如下：对应生成的 css 代码如下：2. 变量的值在 scss 中，变量的值也可以写为 表达式 或者 字符串。例如：对应生成的 css 代码如下：3. 全局颜色加深与减淡函数在 scss 中，设置了很多全局函数，此处介绍加深颜色和减淡颜色的函数，分别为 lighten 和 darken。演示代码如下：生成 css 代码如下：PS: 栏目内容仅作为快速上手使用。

官网地址：https://sass-lang.com/编辑器：VSCode创建文件夹，通过 VSCode 打开，新建文件 demo.scss打开文件，在编辑器右下角可以找到 watch sass 按钮，并点击在 demo.scss 中编辑如下代码可以看到，自动生成了 demo.css 文件，其代码内容即为 demo.scss 编译后所得(1) Scss 可以嵌套选择器编译后(2) & 表示外层元素demo.scss编译后4. Sass 与 Scss 语法的区别编写 Sass 文件需要把 Scs