sass的基础入门语法#学浪计划#

前端发展到现在都有了不小的改变，今天主要谈一下css扩展语法sass的基本用法和语法。

sass是什么？

Sass 是一款强化 CSS 的辅助工具，它在 CSS 语法的基础上增加了变量 、嵌套 、混合 、导入 等高级功能，这些拓展令 CSS 的开发更加便捷。

我们此篇不讲安装和编译，我们只说语法。

<code>$color
:red
/<code>

调用：

<code>
color
:
$color
/<code>

2.嵌套语法

我们知道html是有层级的，但是css却不支持层级，sass完美解决了这个问题。

<code>
.main
{
    
font-size
: 
24px
;
    
a
,
span
{
         
font-size
:
14px
 ;
    }
}/<code>

输出：

<code>
.main
 {
  
font-size
: 
24px
;
}
.main
 
a
, 
.main
 
span
 {  
font-size
: 
14px
;}/<code>

3.父元素&

在Sass中，&表示父元素。

<code>
.wx
{
    
transition
: all 
1s
;
    &
:hover
{
        
transform
: scale(
1.5
);
    }
}/<code> 

输出：

<code>
.wx
 {
  
transition
: all 
1s
;
}
.wx
:hover
 {  
transform
: 
scale
(
1.5
);}/<code>

4.控制语句@if

<code>
$common
:
".index"
;
#{
$common
} 
section
{
    
background-color
: 
#ccc
;
    
width
: 
100%
;
    
height
: 
100px
+
50px 
;
    
@if
 
3
==
3
{
        
height
:
350px
 ;
    }
}/<code>

输出：

<code>
.index
 
section
 {
  
background-color
: 
#ccc
;
  
width
: 
100%
;
  
height
: 
150px
;
  
height
: 
350px
;
}/<code>

5.循环语句from...through..

<code>
@for
 
$i
 from 
1
 through  
3
{
    
.test-
#{
$i
}{
height
: 
10px
*
$i
; 
background-color
: gray;}
}/<code>

输出：

<code>
.test-1
 {
height
: 
10px
; 
background-color
: gray;}
.test-2
 {  
height
: 
20px
;  
background-color
: gray;}
.test-3
 {  
height
: 
30px
;  
background-color
: gray;}/<code>

6.循环语句@each

<code>
@each
 
$var
 in blue,red,green {
    .#{
$var
}{
        
color
: 
$var
;
    }
}/<code>

输出：

<code>
.blue
 { 
color
: blue;}
.red
 {  
color
: red;}
.green
 {  
color
: green;}/<code>

7.代码重用Mixin

<code>
@mixin
 clearleft(
$size
,
$color2
) {
    &{
        
font-size
: 
$size
;
        
color
:
$color2
;
         
clear
:both;
    }
}
.mixin
{
@include
 clearleft(
22px
,red);}/<code>

输出：

<code>
.mixin
 {
  
font-size
: 
22px
;
  
color
: red;
  
clear
: both;
}/<code>

以上就是sass重用的7个知识点，其实还有其他知识点，只是不常用，所以我就不一 一列举了。

關鍵字: font 辅助工具 sass