扬州开发区建设局网站,网站建设研究意义,做网站合肥,域名查询权威网站Sass 是一个 CSS 预处理器#xff0c;完全兼容所有版本的 CSS。实际上#xff0c;Sass 并没有真正为 CSS 语言添加任何新功能。只是在许多情况下可以可以帮助我们减少 CSS 重复的代码#xff0c;节省开发时间。
一、注释
方式一#xff1a;双斜线 //
方式二#xff1a;…Sass 是一个 CSS 预处理器完全兼容所有版本的 CSS。实际上Sass 并没有真正为 CSS 语言添加任何新功能。只是在许多情况下可以可以帮助我们减少 CSS 重复的代码节省开发时间。
一、注释
方式一双斜线 //
方式二css方式 /* */
PS当 Sass 编译成CSS时第一种注释不会编译到CSS中只在Sass文件中可见第二种注释会编译到CSS中
二、嵌套
1、使编码更简洁清晰
在CSS中如果想为其父元素的继承元素定义样式就必须每次都选择父元素
html, body {height: 100%;
}html #root, body #root {height: 100%;
}html .div-with-button, body .div-with-button {background-color: black;
}html .div-with-button button, body .div-with-button button {background-color: #e4c681;
}html .div-with-button button:hover, body .div-with-button button:hover {background-color: #ffe082;
}
Sass相对而言就更简洁
html, body {height: 100%;#root {height: 100%;}.div-with-button {background-color: black;button {background-color: #e4c681;:hover {background-color: #ffe082;}}}
}
2、在嵌套中使用 总是指向它上面的元素可以用于伪类和伪元素
sasscss .box { :focus{} :hover{} :active{} :first-child{} :nth-child(2){} ::after{} ::before{} }.box:focus{} .box:hover{} .box:active{} .box:frist-child{} .box:nth-child(2){} .box::after{} .box::before{}
css
button {background-color: #535353;color: #000;
}
button:hover {background-color: #000;color: #fff;
}
sass
button {background-color: #535353;color: #000;:hover {background-color: #000;color: #fff;}
}
3、多个类名以相同的词开头的嵌套
如果多个类名以相同的词开头比如box-yellow和box-red就可以嵌套它们
.box {-yellow {background: #ff6347;}-red {background: #ffd700;}-green {background: #9acd32;}
}
CSS
.box-yellow {background: #ff6347;
}
.box-red {background: #ffd700;
}
.box-green {background: #9acd32;
}
4、用冒号嵌套属性
当样式包含多个属性时就可以将该样式写成类似对象的样子降属性都包裹在{}里不用单独写每个样式
sass
add-icon {background : {image: url(./assets/arrow-right-solid.svg);position: center center;repeat: no-repeat;size: 14px 14px;}
}
css
.add-icon {background-image: url(./assets/arrow-right-solid.svg);background-position: center center;background-repeat: no-repeat;background-size: 14px 14px;
}
PS在编写Sass时嵌套不要太深尽量不要超过三层超过之后就会导致代码难以维护并且在编译为CSS时就会出现不必要的选择器就会导致CSS文件变大
三、变量
在Sass中我们可以将任何有效的CSS值保存在变量中。变量使用$符号定义。
定义变量
$red: #ee4444;
$black: #222;
$bg-color: #3e5e9e;
$link-color: red;
$p-color: #282A36;$font-p: 13px;
$font-h1: 28px;$base-font: Noto Sans KR, sans-serif;
使用变量
body {background-color : $bg-color;font-size : $font-p;font-family : $base-font;
}h1 {font-size: $font-h1;color: $black;
}p {font-size: $font-p;color: $black;
}a {color: $link-color;
}
当Sass编译成CSS时所有的变量都会被替换为定义的变量值。变量可以减少重复、进行复杂的数学运算等。
CSS变量是有范围的位于顶层的变量都是全局变量在块中定义的变量都是局部变量。全局变量可以在任何地方使用局部变量只能在变量定义的块中使用。
$my-global-variable: global;div {$my-local-variables: local;
}
变量值是可以覆盖的
要想改变全局变量就需要添加!global修饰符
Sass变量可以指定默认值带有 !default 的变量只有在没有值的情况下才会生效
$message-color: blue !default;.message {color: $message-color;
}
可以在 import 之前覆盖模块默认值
sass
$message-color: black;
import my-module;.message {color: $message-color;
}css
p.message {color: black;
}
四、Mixins 和 Include
mixin 是一组可以重用的 CSS 声明语法类似于JavaScript中的函数使用 mixin 指令来代替 function 关键字。调用 mixin 是通过 include 语句完成的。
mixins 使元素水平垂直居中的方法
mixin absolute-center() {position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
}.element {include absolute-center();
}
mixin支持传递参数
mixin square($size) {width:$size;height:$size;
}
div {include square(60px);background-color:#000;
}
参数可以是可选的可选参数的定义和Sass变量的定义形式是一样的
mixin square($width: 50px) {width:$size;height:$size;
}
将 CSS 规则传递给 mixins这些规则可以在使用 content 的 mixin 中使用
mixin hover-not-disabled {:not([disabled]):hover {content;}
}
.button {border: 1px solid black;include hover-not-disabled {border-color: blue;}
}/*这样mixin中的content在编译后就会变成border-color: blue;
这样写有助于减少:not([disabled]):hover部分的重复。*/
五、import 和 use
使用 import 将文件分块并导入到一个父文件中
import normalize;
在使用import时所有变量、mixin 等都可以全局访问因为一切都是全局的所以库必须为其所有成员添加前缀以避免命名冲突。因此不建议使用 import。
可以使用 use 来代替它的基本用法与import 相同
use normalize;
使用 use 导入的文件称为模块。要使用这些模块的 mixin 或变量必须使用命名空间来调用它们。默认情况下命名空间是文件名不带扩展名。
当 _ 被添加到 SCSS 文件的文件名前时解析器知道它是一个部分文件并且它仅用于导入。导入时_ 部分是可选的。注意这里使用 src/colors 来导入 src/_colors.scss。
use src/colors;
可以使用 as 来使用自定义命名空间
use src/colors as c; 六、算术运算符
在CSS中可以使用calc()进行数学计算Sass 支持直接使用、-、/、*、% 操作符对值和变量进行计算
$content-width: 600px;
content {width:$content-width;
}
.inner-content {width: $content-width - 60px;
}
.outer-content {width: $content-width 60px;
}
七、流程控制
在 Sass 中有四种类型的流程控制规则if /else、each、for 和while。
if 和 else 类似于 JavaScript 中的 if 和 else
mixin theme($is-dark: false) {if $is-dark {}else {}
}
each 类似于 JavaScript 中的 for of
$sizes: 40px, 50px, 80px;
each $size in $sizes {.icon-#{$size} { /*#{$size} 表示法用于使用变量制作动态属性名称和选择器这称为插值。*/font-size: $size;height: $size;width: $size;}
}
for 类似于 JavaScript 中的 for 循环
for $i from 1 through 4 {.bubble-#{$i} {transition-delay: .3 * $i;}
}
while不常用类似于 JavaScript 中的 while 循环。
八、继承、扩展
有时需要编写一个仅用于扩展的样式规则。在这种情况下可以使用占位符选择器它看起来像以 % 而不是 . 开头的类选择器。
%flex {display: flex;
}.some-class {height: 50%;background-color: black;
}%flex_with_color {extend %flex;extend .some-class;
}%button_styles {height: 50px;width: 200px;
}div {extend %flex_with_color;button {extend %button_styles;color: #424242;background-color: #d966fb;}
}
编译成css
div {display: flex;
}.some-class, div {height: 50%;background-color: black;
}div button {height: 50px;width: 200px;
}div button {color: #424242;background-color: #d966fb;
}
九、媒体查询
body {article {p {font-size: 100%;color: black;padding: 10px;media (max-width: 768px) {font-size: 150%;}}}
}cssbody article p {font-size: 100%;color: black;padding: 10px;
}media (max-width: 768px) {body article p {font-size: 150%;}
}
媒体查询是支持嵌套的并将所有适用的查询与 and 运算符结合起来
p {media (max-width: 768px) {font-size: 150%; media (orientation: landscape) {line-height: 75%; }}
}css media (max-width: 768px) {p {font-size: 150%;}
}media (max-width: 768px) and (orientation: landscape) {p {line-height: 75%;}
}
