scss --- css的预处理器
Posted ZZZ --- jh
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了scss --- css的预处理器相关的知识,希望对你有一定的参考价值。
scss(sass):
概念:scss是css预处理器, 世界上最成熟、最稳定、最强大的专业级CSS扩展语言, scss是一门高于CSS的语言,它能用来 清晰的、结构化地描述文件样式,有着比普通CSS更加强大的功能.,能够提供更简洁、更优雅的语法、同时提供多种功能来创建可维护和管理样式表.
其他css预处理器:sass(scss), less, Stylus, DT CSS, Switch CSS, Turbine, Switch CSS, CSS Cacheer
原理:Sass本质就是在CSS的语法的基础上增加了自定义的变量、循环、分支、函数、mixin、继承、运算等功能,让CSS编程变得异常强大. 当然浏览器是不认识Sass语法. 开发人员写完了Sass的语法文件后需要通过工具转成原始的CSS代码.
安装:
sass基于Ruby语言开发而成,因此安装sass前需要安装Rub(安装网址:https://rubyinstaller.org/downloads/)
安装完成后需测试安装有没有成功,运行CMD输入以下命令: ruby -v
gem install sass
gem install compass
编译scss:
//单文件转换命令
sass input.scss output.css
//单文件监听命令
sass --watch input.scss:output.css
//如果你有很多的sass文件的目录,你也可以告诉sass监听整个目录:
sass --watch app/sass:public/stylesheets
vscode 使用scss:
1.安装 easy sass
2.修改vscode的配置(以下代码直接复制替换源码),注意:使用编辑器打开文件夹,不然保持的时候会出现路径问题,因为配置文件里面使用的是相对路径
"easysass.compileAfterSave": true,
"easysass.formats": [ //nested:嵌套缩进的 css 代码。//expanded:没有缩进的、扩展的css代码。//compact:简洁格式的 css 代码。//compressed:压缩后的 css 代码
{
"format": "expanded",
"extension": ".css"
},
{
"format": "compressed",
"extension": ".min.css"
}
],
"easysass.targetDir": "./css" //路径
使用:
-
使用变量:
$变量名 eg: $color: red;
注意:如果变量定义在了{ }规则块内,就只能在这个块内使用// 在{}号外面定义的变量是全局变量$color:red; $color:red; // 全局变量 a{ $color:blue; // 花括号内定义的是局部变量 color:$color; // bulie } .bb{ color:$color; //red; } $color:yellow !global; // 变成全局变量 $color:red !default; // 默认变量 // 特殊变量 ( #{表达式/变量}; 进行字符串拼接 ) $aa:top; #dd{ border-#{$aa}:1px solid red; }
-
嵌套css规则
<!--选择器嵌套: -->
#content {
article {
h1 { color: #333 }
p { margin-bottom: 1.4em }
}
aside { background-color: #EEE }
}
<!-- 特殊的:(:hover 前面要加&) -->
article a {
color: blue;
&:hover { color: red }
}
-
循环
@for $i from 1 to 9 { } // 不包含9. 即1-8 @for $i from 1 through 9 { } // 包含9. 即1-9
-
分支
@if $i%2 > 0 { } @else { }
-
混合
@mixin 混合名字 来定义代码块
-
引用
@include 混合名字
-
继承
@import “文件” eg: @import “public.css”
-
综合
$color: red;
@import “public.scss”;
@mixin border{ width:100px; }
#box{ @include border; }
以上是关于scss --- css的预处理器的主要内容,如果未能解决你的问题,请参考以下文章