sass——css预处理入门笔记

讨厌现在的火影,越来越感觉是在看龙珠

上一篇文章 刚刚介绍了less,趁热打铁,赶快学习一下与之相似的sass吧!

总体来讲,基本类似吧~

基本用法

  • 变量
    解释:sass支持css变量化。与less区别在于,less使用 @+变量名 声明变量,而sass使用 $+变量名 声明变量。
$new-color: red;

.h1{
    color: $new-color;
}

如果需要使用变量镶嵌,需要使用 #{ }

$direction: right;

.h2{
    border-#{$direction}:1px solid red;
}

  • 计算
    解释:这个不用解释,和less一样,可以对css进行计算。
.h3{
    color: #333+#456;
    position: relative;
    top: 10px * 3;
    left: 30px / 2
}

  • 嵌套
    解释: 一层套一层。(多一点通俗,少一点套路)
div {
    h1{
        color: blue;
    }
    color : red;
}

  • 属性嵌套
div{
    border: {
        color: red;
    }
}

  • 嵌套中的伪类用法
    解释:在嵌套的代码块内,可以使用&引用父元素。
div{
    &:hover{
        border:1px solid red;
    }
}

  • 注释
    解释:sass的注释有区别对待,主要看你想不想在编译后的css文件中保留注释代码。

  • 只保留在sass文件中而不出现在编译好的css文件中:// + 注释代码

  • 需要出现在编译好的css文件中:/*! + 注释代码 + */


代码复用

牛叉的来了,当然下面这些不常用,如果刚刚使用sass或者less,从这里开始可以忽略了。当然,这里并不难懂,有精力还是要学会的哈。


  • css继承
    解释:使用 @extend 样式A继承了样式B所有的css样式。

sass:

.h2{
    border-#{$direction}:1px solid red;
}

.h4{
    @extend .h2;
    margin: 10px;
}

css:

.h2, .h4 {
  border-right: 1px solid red;
}

.h4 {
  margin: 10px;
}

  • Mixin
    解释:将css模块化,形成类似代码块的css块。允许使用变量。@Mixin 声明css块,@include 调用css块。

sass:

@mixin bigBox {
    width: 100px;
    height: 100px;
    border: 1px solid #ccc;
}

div{
    @include bigBox;
}

css:

div {
  width: 100px;
  height: 100px;
  border: 1px solid #ccc;
}

牛叉的是,他居然可以接受参数!
sass:

@mixin bigBox($haha:100px) {
    width: $haha;
    height: $haha;
    border: 1px solid #ccc;
}

div{
    @include bigBox;
}
div{
    @include bigBox(500px);
}

css:

div {
  width: 100px;
  height: 100px;
  border: 1px solid #ccc;
}

div {
  width: 500px;
  height: 500px;
  border: 1px solid #ccc;
}

  • 插入
    解释: 类似css的import吧。
@import "path/filename.scss";

函数化加循环

我真的开始怀疑人生,这还是我认识的css吗?

  • if判断

sass:

$haha: 100px;
.h1{
    @if $haha > 80px {
        margin: $haha;
        border: 1px solid red;
    }
    @if $haha <= 80px{
        border: 1px solid blue;
    }
}

css:

.h1 {
  margin: 100px;
  border: 1px solid red;
}

还有 @else的搭配使用。
sass:

$haha: 1px;
.h1{
    @if $haha > 80px {
        margin: $haha;
        border: 1px solid red;
    }@else {
        color: red;
    }
}

css:

.h1 {
  color: red;
}
  • for循环
    sass:
@for $i from 20 to 25 {
    .border-#{$i}{
        border : #{$i}px solid red;
    }
}

css:

.border-20 {
  border: 20px solid red;
}

.border-21 {
  border: 21px solid red;
}

.border-22 {
  border: 22px solid red;
}

.border-23 {
  border: 23px solid red;
}

.border-24 {
  border: 24px solid red;
}
  • while循环:

sass:

$i : 5;
@while $i > 0 {
    .item-#{$i}{
        width: #{i}px;
    }
    $i : $i - 1;   
}

css:

.item-5 {
  width: ipx;
}

.item-4 {
  width: ipx;
}

.item-3 {
  width: ipx;
}

.item-2 {
  width: ipx;
}

.item-1 {
  width: ipx;
}

自定义函数:
sass:

  @function double($n) {
    @return $n * 2;
  }
  #sidebar {
    width: double(5px);
  }

css:

#sidebar {
    width: 10px;
}

如有遗漏,欢迎提醒更改,谢谢啦!

THE END

大哥,不点个赞嘛

你可能感兴趣的:(sass——css预处理入门笔记)