变量
变量声明
$font-stack: Helvetica, sans-serif;
$primary-color: #333;
变量引用
body {
font: 100% $font-stack;
color: $primary-color;
}
嵌套
1. 基础嵌套
css表现形式
nav ul{
margin: 0;
padding: 0;
list-style: none;
}
nav ul li{
display: inline-block;
}
scss 表现形式
nav {
ul {
margin: 0;
padding: 0;
list-style: none;
li {
display: inline-block;
}
}
}
2. 引用父级选择器"&"
①:css表现形式
a {font-weight: bold;}
a:hover {color: red;}
①:scss 表现形式
a {
font-weight: bold;
&:hover {color: red;}
}
②:css表现形式
#main {
color: black;
}
#main-sidebar {
border: 1px solid;
}
②:scss 表现形式二
#main {
color: black;
&-sidebar { border: 1px solid; }
}
3. 嵌套属性
css表现形式
.demo {
font-family: fantasy;
font-size: 30em;
font-weight: bold;
}
scss 表现形式
.demo {
// 命令空间后带有冒号:
font: {
family: fantasy;
size: 30em;
weight: bold;
}
}
引入
把child.scss 文件导入 father.scss 中使用
// child.scss
html, body, ul, ol {
margin: 0;
padding: 0;
}
// father.scss
@import './child';
body {
font: 100% Helvetica, sans-serif;
background-color: #efefef;
}
混合
混合
(Mixin)
用来分组那些需要在页面中复用的CSS
声明,开发人员可以通过向Mixin
传递变量参数来让代码更加灵活,该特性在添加浏览器兼容性前缀的时候非常有用,SASS
目前使用@mixin name
指令来进行混合操作。
//声明
@mixin border-radius($radius) {
border-radius: $radius;
-ms-border-radius: $radius;
-moz-border-radius: $radius;
-webkit-border-radius: $radius;
}
//引用
.box {
@include border-radius(10px);
}
继承
//声明
%message-common {
border: 1px solid #ccc;
padding: 10px;
color: #333;
}
//引用
.message {
@extend %message-common;
}
.success {
@extend %message-common;
border-color: green;
}
注意:如果只声明了,没有继承,则声明代码不会被输出到最终生成的CSS文件;
举例:
// 这段代码不会被输出到最终生成的CSS文件,因为它没有被任何代码所继承。
%other-styles {
display: flex;
flex-wrap: wrap;
}
算术运算符
引用scss 后可以直接在css中进行计算
.container { width: 100%; }
article {
float: left;
width: 600px / 960px * 100%;
}
aside {
float: right;
width: 300px / 960px * 100%;
}
如果对你有用,请点个赞哦(* ̄︶ ̄)