Foreword
This article is mainly recorded sassin scssthe basic use of grammar. sassA csspre-compiler that does not have extended the definition of some css variables, condition control, cycle, custom methods.
Basic content
1. Variables
/*scss*/
//声明变量
$primary-color:#1269b5;
//使用变量
div.box{
background-color: $primary-color;
}
/*css*/
div.box{
background-color:#1269b5;
}
2. Nesting
- Posterity
/*scss*/
.nav {
height: 100px;
ul {
margin: 0;
li {
float: left;
list-style: none;
padding: 5px;
}
}
}
/*css*/
.nav{
height: 100px;
}
.nav ul{
margin: 0;
}
.nav ul li {
float: left;
list-style: none;
padding: 5px;
}
- Selector calls the parent (parent-child), when nested
Use &Local will use the parent selector
/*scss*/
.nav {
& &-text {
font-size: 15px;
&:hover{
color: blue;
}
}
}
/*css*/
//父子层级的
.nav .nav-text{
font-size: 15px;
}
.nav .nav-text:hover{
color: blue;
}
- Nested property
/*scss*/
.nav {
border: 1px solid #000 {
left:0;
right:0;
}
}
/*css*/
.nav {
border: 1px solid #000;
border-left: 0;
border-right: 0;
}
3. Mix
/*scss*/
//声明一个setColor的混合
@mixin setColor ($text-color,$background) {
color:$text-color;
background-color:$background;
.text {
color: darken($text-color,10%); //在原来颜色的基础上加深10%
}
}
.content{
//使用这个混合
@include setColor(#fefefe,#969696)
}
/*css*/
.content {
color: #fefefe;
background-color: #969696;
}
.content .text{
color: #e5e5e5;
}
tips:
setColoris the name of the parameter must be passed with a $, and the same variable;
4. Inheritance
Inheritance and succession will be when the inherited class associated selector styles
/*scss*/
.content {
padding: 15px;
}
.content a {
font-weight: bold;
}
.content-info {
@extend .padding;
color: #969696;
}
/*css*/
.content , .content-info{
padding: 15px;
}
.content a , .content-info a{
font-weight: bold;
}
.content-info {
color: #969696;
}
5.Partials和@import
- The document was introduced, Partials file, begin with an underscore, it will not be compiled.
_base.scss
body {
margin: 0;
padding: 0;
}
other.scss
/*scss*/
@import "base";
.a {
color: #969696;
}
/*css*/
body {
margin: 0;
padding: 0;
}
.a{
color: #969696;
}
6. Comment
//这是单行，不会出现在css里面
/*这是多行，会包含在没有压缩之后的css里面*/
/*!这是强制输出注释内容*/
7. List
- With a space or comma-separated list is similar to an array of other languages
padding: 5px 10px;
border: 1px solid red;
- Function list
length(5px 10px) //2 获取长度
nth(5px 10px,1) //5px 获取序号 从1开始
index(1px solid red,solid) //2 获取下标从0开始
append(5px 10px,5px) // (5px 10px 5px) 添加
join (5px 10px ,5px 0) //(5px 10px 5px 0) 组合成新的列表
join (5px 10px ,5px 0,comma) //(5px,10px,5px,0)
8.map and related functions
$colors:(
light:#fff,
dark:#000
)
map-get($colors,dark) // #000 //获取指定的值
map-keys($colors) // (light,dark) //获取所有的key
map-values($colors) // (#fff,#000) //获取所有的值
map-has-key($colors,light) //true 是否有当前的key
map-merge($colors,(light-gray: #e5e5e5)) //添加
map-remove($colors,light,dark) // (light-gray: #e5e5e5) 删除
9. Interpolation
# {}, A flower and a # variable is included in the bracket interpolation.
/*scss*/
$name: "info";
$attr: "border";
.content-#{$name} {
#{$attr}-color: #ccc;
}
/*css*/
.content-info {
border-color: #ccc;
}
10. The condition control
/*scss*/
$flag= true;
$theme: "light";
.body {
@if $theme == dark {
backgroud-color: black;
} @else if $theme == light {
backgroud-color: white;
} @else {
backgroud-color: grey;
}
}
.content {
@if $flag {
color: red;
} @else {
color: yellow;
}
}
/*css*/
.body {
backgroud-color: white;
}
.content {
color: red;
}
tips: and:
and/&&, or:or, to anti-:notreturn:@return
10. @for
-
@for $var form <开始值> through <结束值> -
@for $var form <开始值> to <结束值>
/*scss*/
$columns: 3;
@for $i from 1 through $columns {
.col-#{$i} {
width: 100% / $columns * $i
}
}
@for $i from 1 to $columns {
.row-#{$i} {
width: 100% / $columns * $i
}
}
/*css*/
.col-1 {
width: 25%
}
.col-2 {
width: 50%
}
.col-3 {
width: 75%
}
.row-1 {
width: 25%
}
.row-2 {
width: 50%
}
tips:
throughnumber of cycles, comprising the end value,tothe number of cycles does not include the final value
11. @each
Circular list
/*scss*/
$icons：success error warning;
@each $icon in $icons {
.icon-#{$icon} {
background-image: url(../images/icons/#{$icon}.png)
}
}
/*css*/
.icon-success {
background-image: url(../images/icons/success.png)
}
.icon-error {
background-image: url(../images/icons/error.png)
}
.icon-warning {
background-image: url(../images/icons/warning.png)
}
12. @while
/*scss*/
$i: 6;
@while $i > 0 {
.item-#{$i} {
width: 5px * $i;
}
$i: $i-2;
}
/*css*/
.item-6 {
width: 30px;
}
.item-4 {
width: 20px;
}
.item-2 {
width: 10px;
}
13. A user-defined function
/*scss*/
$colors:(light: #fff,dark: #000)
@function color($key){
//警告
@if not map-has-key($colors,$key) {
@warn "在$colors里没找到 #{$key}这个key"
}
@return map-get($colors,$key);
}
.body {
background-color: color(light);
}
/*css*/
.body {
background-color: #fff;
}
tips: exception information can set warning
@warnand error@error
BEM specification recommends
specification
.block { /* 块*/ }
.block__element { /* 元素 */ }
.block--modifier { /* 修饰符 */ }
Practical application
<!--块 -->
<div class="content">
<!-- content__button 元素 -->
<button
class="content__button
content__button--red ">
</button>
<!-- content__button--red 修饰 -->
</div>
/*scss*/
//块
.content {
//元素
&__button {
width: 40px;
height: 40px;
padding: 5px;
}
//修饰
&__button--red {
color: red
}
}
/*css*/
content__button {
width: 40px;
height: 40px;
padding: 5px;
}
content__button--red {
color: red
}
recommend
If you want to know the knowledge of other aspects of the front-end, you can look over here
