![](https://img-blog.csdnimg.cn/202109050022148.jpg?x-oss-process=image/resize,m_fixed,h_224,w_224)
Sass 基础入门
文章平均质量分 54
学习分享,感谢支持!
爱划水de鲸鱼哥~
一只自由生长的野生程序猿
展开
-
Sass -- 基础知识与环境搭建
文章目录SassSass环境搭建Live Sass CompilerSass初体验Sass基础语法嵌套标识符sassSassSass 是基于Ruby语言开发而成的 CSS 扩展语言,是 CSS 预处理器;Sass 提供了许多便利的写法,可以减少 CSS 代码的重复,节省开发时间。Sass环境搭建Live Sass Compiler在VScode中安装 Live Sass Compiler 插件,它可以帮助我们实时编译Sass代码,将其转化为CSS代码。Sass初体验在VScode中创建Sa原创 2021-09-05 00:16:27 · 309 阅读 · 0 评论 -
Sass -- 变量、计算、导入
文章目录变量变量使用计算导入私有Sass文件Sass @import 与 CSS @import 的区别变量在Sass中,支持使用变量,变量以$开头;变量使用Sass不存在变量提升,变量必须先定义再使用;如果需要将变量在字符串中使用,需将变量写在#{}中;计算在Sass中,允许数值运算;导入Sass 类似 CSS,支持 @import 指令导入其他文件。私有Sass文件将Sass文件名前加上下划线_(例:_demo.scss),表示该文件为私有文件,该文件只会被其他文件引入,VS原创 2021-09-05 12:09:55 · 621 阅读 · 0 评论 -
Sass -- @extend、mixin代码复用
文章目录代码复用继承(@extend)用法混入(mixin)用法传参@content混入(mixin)和引入其他Sass文件区别;代码复用代码复用在开发和维护上尤为重要,在Sass中主要有两种复用方式:继承(@extend)和混入(mixin);继承(@extend)在Sass中允许一个选择器,去继承另一个选择器;用法 .xxx{ } .zzz{ //继承xxx选择器样式 @extend .xxx; }混入(mixin)在Sass中定义mixin,可原创 2021-09-05 13:14:38 · 277 阅读 · 0 评论 -
Sass -- 条件语句、循环语句、自定义函数
文章目录条件语句循环语句@for@while@each自定义函数条件语句在Sass中可以使用@if、@if-else 、@if-else 来进行条件判断,用法和JS相同。循环语句在Sass中可以使用@for、@while 、@each 来进行循环操作。@for@for的用法不同于JS,Sass中的for有两种格式:@for $i from n through m 表示变量i 的范围是[n, m];@for $i from n to m 表示变量i 的范围是[n, m);@while原创 2021-09-05 23:27:45 · 591 阅读 · 0 评论