首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

scss 学习笔记

1、安装

使用 node 通过 npm 安装 sass

其他安装方式请自行搜索。

2、预处理

安装 sass 之后可以在终端运行 sass 命令将 scss 文件编译成 css文件。

命令将监听 app/scss 目录下的 scss 文件,被修改时会自动被编译成 css 文件,并输出到 public/style 目录下。

3、变量

sass 使用 $ 符号未开始定义变量名

4、嵌套

sass 允许使用符合 html 视觉层次结构的方式嵌套 css 选择器

5、import

使用 import 可以将多个 scss 文件导入到一个文件中,通常作为模块被导入的 scss 文件以前导下划线_ 开始命名文件名称。

导入 _reset.scss 文件时不需要写扩展名 .scss,前导下划线也可以省略。

6、混入

mixin 允许创建在整个站点重用的 css 声明组。可以向函数参数一样出入值,使 mixin 更灵活。主要在编写不同的浏览器前缀时使用。

创建时使用 @mixin 指令为其命名,使用时为 @include 后跟 mixin 名称。

7、扩展/继承

使用 @extend 允许从一个选择器共享一组 css 属性到另一个选择器。占位符类只有在扩展时才会打印。

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20190212G06H7S00?refer=cp_1026
  • 腾讯「腾讯云开发者社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 cloudcommunity@tencent.com 删除。

扫码

添加站长 进交流群

领取专属 10元无门槛券

私享最新 技术干货

扫码加入开发者社群
领券