记录Sass的一些用法

Sass变量的定义(永远不要使用@extend!)

$fontSize:12px;
 
body{
 
font-size:$fontSize;
 
}

特殊变量：如果变量嵌套在字符串中，则需要写在 #{} 符号里面，如：

$top:top;
div{
　　margin-#{$top}:10px
}

变量的调用

.btn-primary{
background-color:$btn-primary-bg;
color:$btn-primary-color;
border:1px solid $btn-primary-border;
}

 

not(:last-child) //选中除了最后一个元素并为其加上样式

.layout:not(:last-child){
    margin:0 0 0 10px;
}

mixin的使用(永远不要使用@extend)

@mixin foo {
    color: red;
    font-weight: bold;
    line-height: 2;
}

.#{unique-id()}-#{$i} {
    @include foo;
    content: "ibf#{&}jaslbw";
}

sass中的&用法（这里表示父元素）

/*伪类嵌套*/
.clearfix{
 &:before,
 &:after{
   content:"";
   display: table;
 }
 &:after {
   clear:both;
   overflow: hidden;
 }
}

媒体查询中的嵌套(这里&代表main)

.main {
    float: left;
    width: 45em;
 
    @media (max-width: 480px) { 
　　　　& { float: none; width: 100%; }
　　 }
 } 

&的另一个妙用

.dashboard {
  &-container {
    margin: 30px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
编译后

.dashboard-container {
margin: 30px;
}
.dashboard-text {
font-size: 300px;
line-height: 46px;
}

@content

在sass3.2.0中引入， 可以用来解决css3中 @meidia 或者 @keyframes 带来的问题。它可以使@mixin接受一整块样式，接收的样式从@content开始

//sass 样式             
@mixin max-screen($res){
  @media only screen and ( max-width: $res )
  {
    @content;
  }
}
  
@include max-screen(480px) {
  body { color: red }
}
  
//css 编译后样式
@media only screen and (max-width: 480px) {
  body { color: red }
}

使用@content解决@keyframes关键帧的浏览器前缀问题

// 初始化变量
$browser: null;
// 设置关键帧
@mixin keyframes($name) {
    @-webkit-keyframes #{$name} {
        $browser: '-webkit-'; @content;
    }
    @-moz-keyframes #{$name} {
        $browser: '-moz-'; @content;
    }
    @-o-keyframes #{$name} {
        $browser: '-o-'; @content;
    }
    @keyframes #{$name} {
        $browser: ''; @content;
    }
}
  
// 引入
@include keyframes(scale) {
    100% {
        #{$browser}transform: scale(0.8);
    }
}
  
// css编译后
@-webkit-keyframes scale {
    -webkit-transform: scale(0.8);
}
@-moz-keyframes scale  {
   -moz-transform: scale(0.8);
}
@-o-keyframes scale  {
    -o-transform: scale(0.8);
}
@keyframes scale  {
    transform: scale(0.8);
}

高级用法

1）函数 function

 sass允许用户编写自己的函数，以@function开始

$fontSize: 10px;
@function pxTorem($px) {
    @return $px / $fontSize * 1rem;
}
div {
    font-size: pxTorem(16px);
}
// css编译后样式
div {
    font-size: 1.6rem;
}
　　

 2）if条件语句&&三目判断

语法为 if($condition, $if_true, $if_false)。 三个参数分别表示： 条件，条件为真的值，条件为假的值
if(true, 1px, 2px) => 1px
if(false, 1px, 2px) => 2px

@if语句可以用来判断

// sass样式
$type: monster;
div {
    @if $type == ocean {
        color: blue;
    } @else if $type == matador {
        color: red;
    } @else if $type == monster {
        color: green;
    } @else {
        color: black;
    }
}
// css编译后样式
div {
    color: green;
}

3）循环语句

for循环有两种形式，分别为：@for $var from <start> through <end> 和 @for $var from <start> to <end>。 $var 表示变量，start表示开始值，end表示结束值，两种形式的区别在于 through 包括 end 的值，to 不包括 end 值。

// sass样式
@for $i from 1 to 4 {
    .item-#{$i} {width: 2em * $i;}
}
// css编译后样式
.item-1 {
    width: 2em;
}
.item-2 {
    width: 4em;
}
.item-3 {
    width: 6em;
}
　　

 

while循环 


// sass样式
$i: 2;
@while $i > 0 {
    .item-#{$i} {width: 2em * $i;}
    $i: $i - 1;
}
// css编译后样式
.item-2 {
  width: 4em;
}
.item-1 {
  width: 2em;
}
　　

 

@each循环：语法为@each $var in <list or map>。 其中$var表示变量，而list和map表示数据类型，sass3.3.0新加入多字段循环和map数据循环

单字段list数据循环

//sass 样式
$animal-list: puma, sea-slug, egret;
@each $animal in $animal-list {
  .#{$animal}-icon {
    background-image: url('/images/#{$animal}.png');
  }
}
//css 编译后样式
.puma-icon {
  background-image: url('/images/puma.png');
}
.sea-slug-icon {
  background-image: url('/images/sea-slug.png');
}
.egret-icon {
  background-image: url('/images/egret.png');
}
　　



多字段list数据循环


//sass 样式
$animal-data: (puma, black, default),(sea-slug, blue, pointer);
@each $animal, $color, $cursor in $animal-data {
  .#{$animal}-icon {
    background-image: url('/images/#{$animal}.png');
    border: 2px solid $color;
    cursor: $cursor;
  }
}
//css 编译后样式
.puma-icon {
  background-image: url('/images/puma.png');
  border: 2px solid black;
  cursor: default;
}
.sea-slug-icon {
  background-image: url('/images/sea-slug.png');
  border: 2px solid blue;
  cursor: pointer;
}
　　

 

多字段map数据循环


//sass 样式
$headings: (h1: 2em, h2: 1.5em, h3: 1.2em);
@each $header, $size in $headings {
  #{$header} {
    font-size: $size;
  }
}
//css 编译后样式
h1 {
  font-size: 2em;
}
h2 {
  font-size: 1.5em;
}
h3 {
  font-size: 1.2em;
}

 

标签：Sass,记录,color,keyframes,用法,样式,font,width,size
来源： https://www.cnblogs.com/MrSlow/p/15777802.html