兼容CSS:Sass完全兼容所有版本的CSS,可以无缝地使用任何可用的CSS库
特性丰富:Sass拥有比其他任何CSS扩展语言更多的功能和特性
成熟:Sass已经经过其核心团队超过13年的精心打造
行业认可:一次又一次地,行业把Sass作为首选CSS扩展语言
社区庞大:数家科技企业和成百上千名开发者为Sass提供支持
框架:有无数的框架使用Sass构建 比如Compass、Bourbon 和 Susy
.scss
作为拓展名.sass
作为拓展名$variablename:value;
/* 定义变量 */
$bgc1: yellow;
$color1: #123456;
/* 使用变量 */
.box2 {
width: 200px;
height: 200px;
background-color: $bgc1;
color:$color1
}
{ }
块,把子属性部分写在这个{ }
块中实例:
.parent {
width: 300px;
height: 300px;
background-color: red;
// 父元素选择器
&:hover {
background-color: yellow;
a {
color: #fff;
}
}
.fa {
$color: yellow;
width: 260px;
height: 260px;
background-color: blue;
.sn {
width: 100px;
height: 100px;
background-color: green;
}
a {
text-decoration: none;
color: $color;
// font-size: 100px;
// font-weight: bold;
// font-style: italic;
// font-family: Georgia, 'Times New Roman', Times, serif;
// 属性嵌套
font: {
size: 100px;
weight: bold;
style: italic;
family: Georgia, 'Times New Roman', Times, serif;
}
}
}
}
@import
规则:@import
时,浏览器才会去下载其他css文件,这导致页面加载起来特别慢@import
规则:语法:
@import "filename";
通过sass的混合器实现大段类似样式的重用
@mixin 指令允许定义一个可以在整个样式表中重复使用的样式
@include 指令可以将混入(mixin)引入到文档中
混入也还可以包含选择器、属性嵌套,以及父选择器
一个mixin可以被多个地方使用
(1)混入可以接收参数 可以向混入传递变量(也可直接使用外部变量)
实例:
@mixin box($color1) {
color: $color1;
}
.test_color {
/* 在使用的时候传入实际的值 */
@include box(pink);
}
(2)混入的参数可以定义默认值
实例:
/* 没有传值将使用默认值 */
@mixin box($color1: blue) {
color: $color1;
}
.test_color {
/* 传值则为红色 */
@include box(red);
}
.test_color {
/* 未传值使用默认值为蓝色 */
@include box();
}
(3)设置可变参数:不能确定一个混入(mixin)或函数(function)使用多少个参数,使用 ...
实例:
@mixin box-shadow($shadows...) {
box-shadow: $shadows;
}
.shadows {
@include box-shadow(0px 4px 5px #666, 2px 6px 10px #999);
}
.shadows1 {
@include box-shadow(2px 6px 10px #999);
}
实例:
.fa {
width: 300px;
height: 300px;
background-color: red;
img {
width: 100px;
height: 100px;
}
div {
display: flex;
justify-content: center;
align-items: center;
.left {
flex-shrink: 2;
}
}
&:hover {
background-color: red;
}
}
section.fa {
color: green;
}
.sn {
@extend .fa;
// 任何跟.fa有关的组合选择器样式也会被.sn以组合选择器的形式继承
}
语法:
@if 条件表达式 { 条件判断成功这里的代码就执行 不成功就不执行 }
实例:
$temp: 100;
// temp > 100 :500px temp < 100 :300px temp = 100 :400px
header {
@if $temp > 100 {
// 代码是否执行 条件是否成功 条件判断成功 里面的代码才会被使用
width: 500px;
}
@if $temp < 100 {
width: 300px;
}
@if $temp = 100 {
width: 400px;
}
}
语法:
@if 条件1 {
条件1判断成功就执行的代码
}
@else {
条件1判断不成功就执行的代码
}
实例:
// temp > 100:500px temp<=100:300px
section {
@if $temp > 100 {
// 条件判断成功 就执行
height: 500px;
}
@else {
// 条件判断不成功 就执行
height: 300px;
}
}
语法:
@if 条件1 {
条件1判断成功就执行的代码
}
@else if 条件2 {
条件1判断不就继续判断条件2 条件2 判断成功就执行的代码
}
@else if 条件3 {
条件1 和 条件2判断不就继续判断条件3 条件3 判断成功就执行的代码
}
.....
@else {
以上所有条件判断不成功就执行的代码
}
实例:
// temp > 100 :500px ; temp < 100 :300px ; temp = 100 :400px
footer {
@if $temp > 100 {
// $temp > 100判断成功就执行
line-height: 500px;
}
@else if $temp < 100 {
// $temp > 100判断不成功就继续判断$temp < 100
line-height: 300px;
}
@else {
// $temp > 100 和 $temp < 100都判断不成功就执行
line-height: 400px;
}
}
Sass 是由buby语言编写的一款css预处理语言,和html一样有严格的缩进风格
因不使用花括号和分号 不被广为接受
Sass 是一款强化 CSS 的辅助工具,是对 CSS 的扩展,它在 CSS 语法的基础上增加了变量 (variables)、嵌套 (nested rules)、混合 (mixins)、继承(extend)、导入 (inline imports) 等高级功能,这些拓展令 CSS 更加强大与优雅
使用 Sass 以及 Sass 的样式库(如 Compass)有助于更好地组织管理样式文件,以及更高效地开发项目
SCSS是一款css预处理语言,SCSS 是 Sass 3 引入新的语法,其语法完全兼容 CSS3,并且继承了 Sass 的强大功能
任何标准的 CSS3 样式表都是具有相同语义的有效的 SCSS 文件
SCSS 需要使用分号和花括号而不是换行和缩进
SCSS 对空白符号不敏感,其实就和css3语法一样
css预处理器是用一种专门的语言,进行网页的样式设计,之后在被编译为正常的css文件,以供项目使用
使用css预处理语言的好处:使css更简洁、方便修改、可读性强、适应性强、易于代码的维护
SCSS 和 CSS 写法无差别
把现有的“.css”文件直接修改成“.scss”即可使用
sass和scss其实是一样的css预处理语言,scss可简单理解是sass的一个升级版本
SASS版本3.0之前的后缀名为.sass,而版本3.0之后的后缀名.scss
sass时代是有严格的缩进规范并且没有‘{}’和‘;’
而scss则和css的规范是一致的