sass
在我们书写css的时候 我们会发现重复性代码太多 对应的产生了预编译css(最终会编译成css文件),常用的预编译css有什么?
预编译css
1.sass (源码使用ruby写的 基于python环境运行)
2.less (诞生比sass要晚 整体语法跟sass差不多)
3.styus
概述
sass是 世界上最成熟、最稳定、最强大的专业级CSS扩展语言!
特性
1.兼容CSS (在sass文件里面可以直接书写css)
2.支持后缀名为sass(他没有{}以及;) 以及 scss(scss常用 这个跟css书写差不多)
3.社区成熟 (api众多)
sass入门
入门环境
1.安装node (基于node环境运行)
2.使用专门的编译工具 进行在线编译运行
3.使用插件编译运行
1.使用vscode下载插件
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-eBkYwAb5-1650546086762)(C:\Users\29769\AppData\Roaming\Typora\typora-user-images\image-20220421165742985.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-DbGzgIl2-1650546086765)(C:\Users\29769\AppData\Roaming\Typora\typora-user-images\image-20220421170229030.png)]
2.配置环境(指定的路径需要直接创建)
{
"workbench.iconTheme": "material-icon-theme",
"material-icon-theme.showWelcomeMessage": false,
"editor.fontSize": 18,
"emmet.triggerExpansionOnTab": true,
"javascript.updateImportsOnFileMove.enabled": "always",
"workbench.startupEditor": "none",
"explorer.confirmDelete": false,
"bracketPairColorizer.depreciation-notice": false,
"editor.mouseWheelZoom": true,
"easysass.compileAfterSave": true,
"easysass.formats": [
{
"format": "expanded",
"extension": ".css"
},
{
"format": "compressed",
"extension": ".min.css"
}
],
"easysass.targetDir": "./css"
}
使用
变量声明
$变量名:值;
$a:'red';//变量声明
// 变量声明 注释 这个注释不会到css里面的
/* hello 会生成到css里面去 */
div{
background-color: $a;
font-size: 16px;
color: $a;
}
//生成的内容
@charset "UTF-8";
/* hello 会生成到css里面去 */
/*!* hello */
div {
background-color: "red";
font-size: 16px;
color: "red";
}
嵌套(无限嵌套)
div{
color:red;
a{
font-size:16px
}
}
//生成内容
div {
color: red;
}
div a {
font-size: 16px;
}
&
//&
div{
color:red;
&:hover{
color: blue;
}
}
//生成的内容
@charset "UTF-8";
/* hello 会生成到css里面去 */
div {
color: red;
}
div:hover {
color: blue;
}
支持运算
$count:50;
div{
font: $count%2+'px';
}
//生成的内容
@charset "UTF-8";
/* hello 会生成到css里面去 */
div {
font: "0px";
}
支持判断
p {
@if 1 + 1 == 2 { border: 1px solid; }
@if 5 < 3 { border: 2px dotted; }
@if null { border: 3px double; }
}
//生成的css
@charset "UTF-8";
/* hello 会生成到css里面去 */
p {
border: 1px solid;
}
混入器 @mixin @includ
@mixin border($width,$color) {
border: $width solid $color;
}
p{
@include border(1px,red)
}
div{
@include border(1px,blue)
}
//生成的内容
@charset "UTF-8";
/* hello 会生成到css里面去 */
p {
border: 1px solid red;
}
div {
border: 1px solid blue;
}
指定默认参数
//指定默认参数值
@mixin border($width:1px,$color:red,$line:solid) {
border: $width $line $color;
}
p{
@include border(1px,red,"double")
}
div{
@include border(1px,blue)
}
h1{
@include border(1px,blue)
}
img{
@include border()
}
//生成内容
@charset "UTF-8";
/* hello 会生成到css里面去 */
p {
border: 1px "double" red;
}
div {
border: 1px solid blue;
}
h1 {
border: 1px solid blue;
}
img {
border: 1px solid red;
}
继承 @extend
//指定默认参数值
@mixin border($width:1px,$color:red,$line:solid) {
border: $width $line $color;
}
p{
@include border(1px,red,"double")
}
div{
//继承了p标签
@extend p
}
//生成的内容
@charset "UTF-8";
/* hello 会生成到css里面去 */
p, div {
border: 1px "double" red;
}
导入对应的scss以及sass文件以及css文件
@import "./a.scss";
p{
@include border(1px,red,"double")
}
)
}
div{
//继承了p标签
@extend p
}
//生成的内容
@charset “UTF-8”;
/* hello 会生成到css里面去 */
p, div {
border: 1px “double” red;
}
##### 导入对应的scss以及sass文件以及css文件
```css
@import "./a.scss";
p{
@include border(1px,red,"double")
}