SCSS用法&用SCSS写一个自己的样式库

环境安装

关于scss的环境安装，我这里就不概述了。sass官网有非常清楚的安装过程。
sass/scss环境安装链接（点我）

使用方法

就一个建议：敲一遍，你都懂了！

/* 当变量使用*/
$blue: #1875e7;
div {
  color: blue;
}

$side: left;
.rounded {
  border-#{side}-radius: 5px;
}

/*计算功能*/
$var: 4;
body {
  margin: (14px/2);
  top: 50px+100px;
  right: $var * 10%;
}

/*嵌套*/
div {
  hi {
    color: $blue;
  }
}

/*属性嵌套*/
p {
  border: {
    color: $blue;
    width: $var;
  }
}

/*继承*/
.class1 {
  border: 1px solid gainsboro;
}

.class2 {
  @extend .class1;
  font-size: 18px;
}

/* mixin 可应用于写兼容*/
@mixin rounded-corners($argus) {
  -moz-border-radius: 1px * $argus !important;
  -webkit-border-radius: 1px * $argus !important;
  border-radius: 1px * $argus !important;
}

.no-rounded {
  @include rounded-corners(0)
}

/* if 条件语句*/
p {
  @if 1+1==2 {
    background-color: #00BCD4
  } @else {
    background-color: rebeccapurple;
  }
}

/* 遍历的用法*/
@for $i from 1 to 10 {
  .border-#{$i} {
    border: #{$i}px solid hotpink;
  }
}

$i: 6;
@while $i>0 {
  .item-#{$i} {
    width: 2em * $i;
    $i: $i-2;
  }
}

@each $member in a, b, c, d {
  .#{$member} {
    background-image: url("/img/img#{$member}.jpg");
  }
}

$m-white: white;
$m-black: black;
$m-green: green;
$m-red: red;

@each $c-name, $color in (c-white, $m-white),
        (c-black, $m-black),
        (c-red, $m-red),
        (c-green, $m-green), {
  .#{$c-name} {
    color: $color;
  }
}
//使用：class=".c-black"

/* 自定义函数*/
@function double($n){
  @return $n*2
}
#sidebar{
  width: double(5px);
}

写个scss库

原因：徒手写样式，不用看屏，框架脚手架信手拈来，一个人就是个团队（流程+设计+前后端【app／pc】）。做一个完美的人。

可以直接去github看原作者写的https://github.com/walk-liuyan/scss_lib

文件格式：

• scss（文件夹）
  • lib（通用样式文件夹）
    • rounded.scss（通用样式）
    • colors.scss
    • 等等scss文件
  • main.scss（入口文件）
  • extra.css（根据项目自己写的样式）

模块：radius

使用方法：<div class="rounded-bottom"></div>

@mixin rounded-corners($argus){
  -moz-border-radius: 1px * $argus !important;
  -webkit-border-radius: 1px * $argus !important;
  border-radius: 1px * $argus !important;
}
@mixin rounded($top,$right,$bottom,$left){
  -moz-border-radius: $top * 1px $right * 1px $bottom * 1px $left * 1px !important;
  -webkit-border-radius:$top * 1px $right * 1px $bottom * 1px $left * 1px !important;
  border-radius: $top * 1px $right * 1px $bottom * 1px $left * 1px !important;
}
.no-rounded{
  @include rounded-corners(0)
}
.rounded{
  @include rounded-corners(4)
}
.rounded-x{
  border-radius: 50% !important;
}
.rounded-2x{
  @include rounded-corners(10)
}
.rounded-3x{
  @include rounded-corners(15)
}
.rounded-4x{
  @include rounded-corners(20)
}
.rounded-sm{
  @include rounded-corners(2)
}
.rounded-md{
  @include rounded-corners(3)
}
.rounded-top{
  @include rounded(4,4,0,0);
}
.rounded-left{
  @include rounded(4,0,0,4);
}
.rounded-right{
  @include rounded(0,4,4,0);
}
.rounded-bottom {
  @include rounded(0,0,4,4);
}

模块：_color.scss

使用方法：<div class="bg-green c-black"></div>

$m-white: white;
$m-black: black;
$m-green: green;
$m-red: red;

@each $c-name, $color in (c-white, $m-white),
        (c-black, $m-black),
        (c-red, $m-red),
        (c-green, $m-green), {
  .#{$c-name} {
    color: $color;
  }
}

@each $bg-name, $color in (bg-white, $m-white),
        (bg-green, $m-green), {
  .#{$bg-name} {
    background-color: $color;
  }
}

@each $bd-name, $color in (bd-white, $m-white),
        (bd-red, $m-red),
        (bd-balck, $m-black),
        (bd-green, $m-green), {
  .#{$bd-name} {
    border: 1px solid $color !important;
  }
}

模块_spacing.scss

使用方法：<span class='db h30 fz-12'></span>
实现如下：
display:block
height:30px
line-height:30px
font-size:12px

.auto{
  margin-right: auto;
  margin-left: auto;
}

$sp-size: 0;
@while $sp-size<=30 {
  .m-#{$sp-size} {
    margin: 1px * $sp-size !important;
  }
  .m-t-#{$sp-size} {
    margin-top: 1px * $sp-size !important;
  }
  .m-b-#{$sp-size} {
    margin-bottom: 1px * $sp-size !important;
  }
  .m-l-#{$sp-size} {
    margin-left: 1px * $sp-size !important;
  }
  .m-r-#{$sp-size} {
    margin-right: 1px * $sp-size !important;
  }
  .p-#{$sp-size} {
    padding: 1px * $sp-size !important;
  }
  .p-t-#{$sp-size} {
    padding-top: 1px * $sp-size !important;
  }
  .p-b-#{$sp-size} {
    padding-bottom: 1px * $sp-size !important;
  }
  .p-l-#{$sp-size} {
    padding-left: 1px * $sp-size !important;
  }
  .p-r-#{$sp-size} {
    padding-right: 1px * $sp-size !important;
  }
  $sp-size: $sp-size+5
}

$fz-size: 12;
@while $fz-size <=34 {
  .fz-#{$fz-size} {
    font-size: 1px * $fz-size !important;
  }
  $fz-size: $fz-size+2;
}

$hi-size: 18;
@while $hi-size<=38 {
  .h#{$hi-size} {
    height: 1px * $hi-size !important;
    line-height: 1px * $hi-size !important;
  }
}

转载自
作者：Ann_l
链接：https://www.jianshu.com/p/84e14ade32b5
來源：简书
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。