vscode 中搜索并安装插件 Live Sass Compiler
在设置中搜索 Live Sass Compiler 配置如下。
"liveSassCompile.settings.formats": [
{
"format" : "expanded" ,
"extensionName" : ".css" ,
"savePath" : null
}
]更多配置自行搜索 Live Sass Compiler
使用
ctrl+shift+P 键入Live Sass: Watch Sass 以开始实时编译，
键入 Live Sass: Stop Watching Sass 以停止实时编译。
$main-color: red;
div {
$this-color: blue;
color: $this-color;
background: $main-color;
}
// 编译后 css
div {
color: blue;
background: red;
}
注意
变量声明以 $ 开头如 $a
变量中下划线和中线可以互换兼容$a_b === $a-b
变量定义后可以修改 $a = red; $a = blue;
变量存在作用域 {} 中声明的变量外部无法使用
变量值中可以存在变量如 $main-border: 1px solid $main-color;
// 1. 普通嵌套
div { .header {} }
// 输出 div .header {}
body { div,h1,h2 { } }
// 输出 body div,body h1,body h2 {}
// 2. 父选择器 &
div {
&.header {
color: #fff
}
}
// 输出 div.header { color: #fff }
.header {
&-txt {
color: #fff;
}
}
// 输出 .header-txt { color: #fff; }
// 3. 属性嵌套
div {
font: {
size: 10px;
weight: bold
}
}
// 输出 div { font-size: 10px; font-weight: bold }// _header.scss
@import 'header';
注意
导入代码后面要加分号否则出错
被导入 scss 文件一般使用 开头
导入 scss 文件可省略后缀和前面
导入 scss 不会产生 http 请求
导入 scss 嵌套中也可使用
导入 css 必须写后缀
导入 css 会产生 http 请求
导入 css 会自动提到文件开头
scss
/* 多行注释 */
// 单行注释
css
/* 多行注释 */
注意
注释分为多行注释和单行注释
多行注释会被保留在输出的CSS中
而单行注释又叫静默注释不会出现在生成的css文件中
/*
混合器 @mixin @include
使用 @mixin 标识符给一大段样式赋予一个名字name，这样你就可以通过 “@include name” 重用这段样式到任意地方。
*/
// 1. 普通用法
@mixin important-text {
font-size: 25px;
font-weight: bold;
border: 1px solid blue;
}
div {
@include important-text;
}
header {
span {
@include important-text;
}
}
// 生成 css
div {
font-size: 25px;
font-weight: bold;
border: 1px solid blue;
}
header span {
font-size: 25px;
font-weight: bold;
border: 1px solid blue;
}
// 2. 定义含参数的混合器
@mixin link-colors($normal, $hover, $visited) {
color: $normal;
&:hover { color: $hover; }
&:visited { color: $visited; }
}
// 再样式规则中调用含参的混合器
a {
@include link-colors(blue, red, green);
}
// 还可以通过语法$name: value的形式指定每个参数的值。
span {
@include link-colors(
$normal: blue,
$visited: green,
$hover: red
);
}
// 生成 css
a {
color: blue;
}
a:hover {
color: red;
}
a:visited {
color: green;
}
span {
color: blue;
}
span:hover {
color: red;
}
span:visited {
color: green;
}
/*
继承 @extend
一个选择器的样式可以继承另一个选择器
如果一个样式与另外一个样式几乎相同，只有少量的区别，则使用 @extend 就显得很有用。
*/
.error {
border: 1px solid red;
background-color: #fdd;
}
.seriousError {
@extend .error;
border-width: 3px;
}
// 生成 css
.error, .seriousError {
border: 1px solid red;
background-color: #fdd;
}
.seriousError {
border-width: 3px;
}
/*
占位符 %
%placeholder 声明的代码，如果不被 @extend 调用的话，不会产生任何代码
*/
%mt5 {
margin-top: 5px;
}
%pt5{
padding-top: 5px;
}
.btn {
@extend %mt5;
@extend %pt5;
}
.block {
@extend %mt5;
span {
@extend %pt5;
}
}
// 生成 css
.btn, .block {
margin-top: 5px;
}
.btn, .block span {
padding-top: 5px;
}
注意
混合器 mixin 中可以嵌套其他样式 可以传参数
继承 extend 不能继承嵌套 不可传参数
占位符% 和继承很像只是不生成占位的源代码
/*
Interpolation 可以说是 scss 中开挂般的存在
可以通过 #{} 给属性和类名进行变量替换
*/
$prop1: border;
@mixin set-one($side, $val){
#{$prop1}-#{$side}: $val;
}
.box-bor {
@include set-one(width, 2px);
@include set-one(style, dashed);
@include set-one(color, green);
}
// 生成 css
.box-bor {
border-width: 2px;
border-style: dashed;
border-color: green;
}
// 结合 @each
$prop2: padding, margin;
$name: 'name';
@mixin set-prop($side, $val) {
@each $prop in $prop2{
#{$prop}-#{$side}: $val;
}
}
.box-#{$name} {
@include set-prop(left, 16px);
}
// css
.box-name {
padding-left: 16px;
margin-left: 16px;
}条件控制指令：@if 条件{...}
循环控制指令：
@for $var from <开始值> through <结束值> -----------包括结束值
@for $var from <开始值> to <结束值> ------------不包括结束值
循环List项目的控制指令：@each $var in $List{}
条件判断循环：@while 条件{...}
警告和错误的提示：
@warn "..."------------------------在终端输出警告
@error "..."----------------在.css文件和终端输出错误
/* @if 指令 */
p {
@if 10 + 10 == 20 { border: 1px dotted; }
@if 7 < 2 { border: 2px solid; }
@if null { border: 3px double; }
}
// 生成 css
p {
border: 1px dotted;
}
// scss
$type: audi;
p {
@if $type == benz {
color: red;
} @else if $type == mahindra {
color: blue;
} @else if $type == audi {
color: green;
} @else {
color: black;
}
}
// 生成 css
p {
color: green;
}
/* @for 指令 */
// scss
@for $i from 1 through 3 {
.item-#{$i} { width: 2em * $i; }
}
// 生成 css
.item-1 {
width: 2em;
}
.item-2 {
width: 4em;
}
.item-3 {
width: 6em;
}
// scss
@for $i from 1 to 3 {
.item-#{$i} { width: 2em * $i; }
}
// 生成 css
.item-1 {
width: 2em;
}
.item-2 {
width: 4em;
}
/* @each 指令 */
@each $color in red, green, yellow, blue {
.p_#{$color} {
background-color: $color;
}
}
// 生成 css
.p_red {
background-color: red;
}
.p_green {
background-color: green;
}
.p_yellow {
background-color: yellow;
}
.p_blue {
background-color: blue;
}
// scss
$list: (h1, aqua, dotted), (h2, red, solid), (h3, green, double);
@each $header, $color, $border in $list {
$i: index($list, ($header, $color, $border));
.#{$header}-#{$i} {
background-color : $color;
border: $border;
}
}
// 生成 css
.h1-1 {
background-color: aqua;
border: dotted;
}
.h2-2 {
background-color: red;
border: solid;
}
.h3-3 {
background-color: green;
border: double;
}scss 中可以进行想 js 一样的运算。
$w1: 100px;
div {
width: $w1 + 20;
height: ($w1 * 2) - 40;
line-height: (180px/30);
}
// 生成 css
div {
width: 120px;
height: 160px;
line-height: 6px;
}
注意
运算建议带括号方便理解和维护
加减乘运算可以都带单位也可以只有一个带单位会保留单位
除法运算分子一定要带单位才能保留单位，只有分母带单位将报错
除法运算都带单位或都不带单位结果都不带单位
运算中两者都不带单位结果也不带单位
$theNumber: 4.5;
div {
width: percentage($theNumber); // 将一个不带单位的数转换成百分比值； //450%
}
// 生成css
div {
width: 450%;
}$theString: "Hello World";
div::after {
content: to-upper-case($theString);
}
// 生成css
div::after {
content: "HELLO WORLD";
}$base-color-hsl:hsl(0,100,50%);
div {
color: adjust-hue($base-color-hsl,137deg);
}
// 生成css
div {
color: #00ff48;
}$border: 1px solid black;
p {
@if length($border) < 2 {
color: red;
} @else {
color: blue;
}
}
// 生成css
p {
color: blue;
}$colors:(light:#ffffff, dark:#000000); //定义map
p {
color: map-get($colors,dark);
}
// 生成css
p {
color: #000000;
}$width1: 10px;
$width2: 20px;
@function widthFn($n) {
@return $n * $width2 + ($n - 1) * $width1;
}
div {
width: widthFn(5);
}
// 生成css
div {
width: 140px;
}