Sass 基础入门
文章平均质量分 54
学习分享,感谢支持!
爱划水de鲸鱼哥~
一只自由生长的野生程序猿
展开
-
Sass -- 基础知识与环境搭建
文章目录SassSass环境搭建Live Sass CompilerSass初体验Sass基础语法嵌套标识符sass Sass Sass 是基于Ruby语言开发而成的 CSS 扩展语言,是 CSS 预处理器; Sass 提供了许多便利的写法,可以减少 CSS 代码的重复,节省开发时间。 Sass环境搭建 Live Sass Compiler 在VScode中安装 Live Sass Compiler 插件,它可以帮助我们实时编译Sass代码,将其转化为CSS代码。 Sass初体验 在VScode中创建Sa原创 2021-09-05 00:16:27 · 319 阅读 · 0 评论 -
Sass -- 变量、计算、导入
文章目录变量变量使用计算导入私有Sass文件Sass @import 与 CSS @import 的区别 变量 在Sass中,支持使用变量,变量以$开头; 变量使用 Sass不存在变量提升,变量必须先定义再使用; 如果需要将变量在字符串中使用,需将变量写在#{}中; 计算 在Sass中,允许数值运算; 导入 Sass 类似 CSS,支持 @import 指令导入其他文件。 私有Sass文件 将Sass文件名前加上下划线_(例:_demo.scss),表示该文件为私有文件,该文件只会被其他文件引入,VS原创 2021-09-05 12:09:55 · 635 阅读 · 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 · 289 阅读 · 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 · 599 阅读 · 0 评论