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下载插件
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")
}
``
}
这个是scss文件
// 这个注释不会到css里面
/* 这里的注释会到css里面去 */
// 为什么需要scss 他可以进行变量声明和层级嵌套(无限嵌套)
//声明变量
$a:'red';
div{
background-color: $a;
font-size: 16px;
width: 10px;
height: 20px;
color: $a;
}
// 层级嵌套
div{
color: $a;
a{
background-color: $a;
}
}
// & 取消嵌套时的空格
div{
color: yellow;
&:hover{
color: tomato;
}
}
// 可以做计算
$count:50;
div{
font-size: $count+5px ;
}
// 支持判断
// 混入器
@mixin border($width:1px,$color:#000,$line:solid) {
border: $width solid $color;
}
p{
@include border(10px, blue)//使用混入器
}
h1{
@include border(1px, $a)
}
b{
@include border()
}
// 继承
i{
@extend b;
}
// 导入scss、sass以及css的文件
// @import "文件地址"
这个是自动生成的css文件
@charset "UTF-8";
/* 这里的注释会到css里面去 */
div {
background-color: "red";
font-size: 16px;
width: 10px;
height: 20px;
color: "red";
}
div {
color: "red";
}
div a {
background-color: "red";
}
div {
color: yellow;
}
div:hover {
color: tomato;
}
div {
font-size: 55px;
}
p {
border: 10px solid blue;
}
h1 {
border: 1px solid "red";
}
b, i {
border: 1px solid #000;
}
补充:在以后的代码书写中,使用scss书写css文件,但是自己的html引入的是min.css文件,这个文件体积更小(没有缩进、换行,所有的缩进换行都会被解释为字符然后再渲染到页面上去)