css预处理器：sass

作者: 张xiao蛋 | 来源:发表于2018-10-18 16:54 被阅读0次

Sass

Sass简介
Sass 是一种css预处理器,CSS 预处理器定义了一种新的语言，其基本思想是，用一种专门的编程语言，为 CSS 增加了一些编程的特性，将 CSS 作为目标生成文件，然后开发者就只要使用这种语言进行编码工作。
除了sass还有一些其他常见的预处理语言
LESS
Stylus
Sass 有时候也被称为 SCSS,两者之间不同之处有以下两点：
文件扩展名不同，Sass 是以“.sass”后缀为扩展名，而 SCSS 是以“.scss”后缀为扩展名
语法书写方式不同，Sass 是以严格的缩进式语法规则来书写，不带大括号({})和分号(;)，而 SCSS 的语法书写和我们的 CSS 语法书写方式非常类似。
来看一个示例：

/* Sass 语法 */
$font-stack: Helvetica, sans-serif
$primary-color: #333
body
  font: 100% $font-stack
  color: $primary-color
/* Scss 语法 */
$font-stack: Helvetica, sans-serif;
$primary-color: #333;
body {
  font: 100% $font-stack;
  color: $primary-color;
}
编译出来的 CSS
body {
  font: 100% Helvetica, sans-serif;
  color: #333;
}

scss文件中可以完全像写正常的css那样去写.

sass安装
原生下载方法

npm install -g node-sass
node-sass -w xxx.scss xxx.css --output-style expanded

vue安装命令：

npm i node-sass sass-loader -D

node-sass 参数:
-w, --watch                Watch a directory or file
-r, --recursive            Recursively watch directories or files
-o, --output               Output directory
-x, --omit-source-map-url  Omit source map URL comment from output
-i, --indented-syntax      Treat data from stdin as sass code (versus scss)
-q, --quiet                Suppress log output except on error
-v, --version              Prints version info
--output-style             CSS output style (nested | expanded | compact | compressed)
--indent-type              Indent type for output CSS (space | tab)
--indent-width             Indent width; number of spaces or tabs (maximum value: 10)
--linefeed                 Linefeed style (cr | crlf | lf | lfcr)
--source-comments          Include debug info in output
--source-map               Emit source map
--source-map-contents      Embed include contents in map
--source-map-embed         Embed sourceMappingUrl as data URI
--source-map-root          Base path, will be emitted in source-map as is
--include-path             Path to look for imported files
--follow                   Follow symlinked directories
--precision                The amount of precision allowed in decimal numbers
--importer                 Path to .js file containing custom importer
--functions                Path to .js file containing custom functions
--help                     Print usage info

Sass的基本特性
变量

$brand-primary : darken(#428bca, 6.5%) !default;
$btn-primary-color : #fff !default;
$btn-primary-bg : $brand-primary !default;
$btn-primary-border : darken($btn-primary-bg, 5%) !default;
.btn-primary {
   background-color: $btn-primary-bg;
   color: $btn-primary-color;
   border: 1px solid $btn-primary-border;
}
$baseLineHeight: 2;
$baseLineHeight: 1.5 !default;
body{
    line-height: $baseLineHeight;
}
/* 局部变量 */
$color: orange !default;
.block {
  color: $color;
}
em {
  $color: red;
  a {
    color: $color;
  }
}
span {
  color: $color;
}

嵌套

nav {
  a {
    color: red;
    header & {
      color:green;
    }
  }  
}

.box {
  border: {
   top: 1px solid red;
   bottom: 1px solid green;
  }
}

.clearfix{
  &:before,
  &:after {
    content:"";
    display: table;
  }
  &:after {
    clear:both;
    overflow: hidden;
  }
}

不要无节制嵌套,一切都根据实际情况判断
混合宏

@mixin border-radius{
  -webkit-border-radius: 5px;
  border-radius: 5px;
}
button{
  @include border-radius;
}
@mixin border-radius($radius:5px){
  -webkit-border-radius: $radius;
  border-radius: $radius;
}
.nav{
  @include border-radius;
}
.box{
  @include border-radius(3px);
}
@mixin center($width,$height){
  width: $width;
  height: $height;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -($height) / 2;
  margin-left: -($width) / 2;
}
.box-center {
  @include center(500px,300px);
}
@mixin box-shadow($shadows...){
  @if length($shadows) >= 1 {
    -webkit-box-shadow: $shadows;
    box-shadow: $shadows;
  } @else {
    $shadows: 0 0 2px rgba(#000,.25);
    -webkit-box-shadow: $shadow;
    box-shadow: $shadow;
  }
}
.box {
  @include box-shadow(0 0 1px rgba(#000,.5),0 0 2px rgba(#000,.2));
}

混合宏会生成冗余代码
扩展/继承

.btn {
  border: 1px solid #ccc;
  padding: 6px 10px;
  font-size: 14px;
}

.btn-primary {
  background-color: #f36;
  color: #fff;
  @extend .btn;
}

.btn-second {
  background-color: orange;
  color: #fff;
  @extend .btn;
}

不会生成冗余代码
占位符

%mt5 {
  margin-top: 5px;
}
%pt5{
  padding-top: 5px;
}
.btn {
  @extend %mt5;
  @extend %pt5;
}

mt5 和 pt5 并不会生成最终代码
插值#{}
允许在#{}内部解析变量

$properties: (margin, padding);
@mixin set-value($side, $value) {
  @each $prop in $properties {
    #{$prop}-#{$side}: $value;
  }
}
.login-box {
  @include set-value(top, 14px);
}

注释
1.类似 CSS 的注释方式，使用 ”/* ”开头，结属使用 ”*/ ”
2.类似 JavaScript 的注释方式，使用“//”
两者区别，前者会在编译出来的 CSS 显示，后者在编译出来的 CSS 中不会显示
数据类型
Sass 和 JavaScript 语言类似，也具有自己的数据类型，在 Sass 中包含以下几种数据类型：
1.数字: 如，1、 2、 13、 10px；
2.字符串：有引号字符串或无引号字符串，如，”foo” ‘bar’ baz；
3.颜色：如，blue, #04a3f9, rgba(255,0,0,0.5);
4.布尔型：如，true, false；
5.空值：如，null；
6.值列表：用空格或者逗号分开，如，1.5em 1em 0 2em , Helvetica, Arial, sans-serif
运算

.box {
  width: 20px + 8in;
}
$full-width: 960px;
$sidebar-width: 200px;
.content {
  width: $full-width -  $sidebar-width;
}
.box {
  width: 10px * 2;
}
.box {
  width: (100px / 2);  
}
p {
  font: 10px/8px;             // 纯 CSS，不是除法运算
  $width: 1000px;
  width: $width/2;            // 使用了变量，是除法运算
  width: round(1.5)/2;        // 使用了函数，是除法运算
  height: (500px/2);          // 使用了圆括号，是除法运算
  margin-left: 5px + 8px/2px; // 使用了加（+）号，是除法运算
}
.box {
  width: ((220px + 720px) - 11 * 20 ) / 12 ;  
}
p {
  color: #010203 + #040506;
  background-color: #010203 * 2;
}

$content: "Hello" + "" + "Sass!";
.box:before {
  content: " #{$content} ";
}

Sass高级特性

@if
@mixin blockOrHidden($boolean:true) {
  @if $boolean {
    display: block;
  }
  @else {
    display: none;
  }
}
.block {
  @include blockOrHidden;
}
.hidden{
  @include blockOrHidden(false);
}
@for
@for $i from <start> through <end>
@for $i from <start> to <end>
@for $i from 1 through 3 {
  .item-#{$i} { width: 2em * $i; }
}
@for $i from 1 to 3 {
  .item-#{$i} { width: 2em * $i; }
}
$grid-prefix: span !default;
$grid-width: 60px !default;
$grid-gutter: 20px !default;

%grid {
  float: left;
  margin-left: $grid-gutter / 2;
  margin-right: $grid-gutter / 2;
}
@for $i from 1 through 12 {
  .#{$grid-prefix}#{$i}{
    width: $grid-width * $i + $grid-gutter * ($i - 1);
    @extend %grid;
  }  
}
@each
$list: adam john wynn mason kuroir; //$list 就是一个列表
@mixin author-images {
    @each $author in $list {
        .photo-#{$author} {
            background: url("/images/avatars/#{$author}.png") no-repeat;
        }
    }
}
.author-bio {
    @include author-images;
}

Sass中的函数

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

全部的内置函数
字符串函数
unquote
quote
To-upper-case
To-lower-case
percentage

.footer{
  width : percentage(.2)
}

round
ceil
floor
abs
min
max
random
列表函数
length 取列表数据的长度
nth (10px 20px 30px, 1)
join join(10px 20px, 30px 40px)
append append(10px 20px ,30px)
zip zip(1px 2px 3px,solid dashed dotted,green blue red)
index index(1px solid red, solid)
type-of type-of(100)
unit 取单位
unitless 判断一个值是否带有单位
comparable 判断两个数是否可以进行加减合并
if(true,1px,2px)
Maps 函数
map-get
map-has-key
map-keys
map-values
map-merge
map-remove
keywords

$map: (
  $key1: value1,
  $key2: value2,
  $key3: value3
)   

$map: (
  key1: value1,
  key2: (
    key-1: value-1,
    key-2: value-2,
  ),
key3: value3
);

$theme-color: (
  default: (
      bgcolor: #fff,
      text-color: #444,
      link-color: #39f
  ),
  primary:(
      bgcolor: #000,
      text-color:#fff,
      link-color: #93f
  ),
  negative: (
      bgcolor: #f36,
      text-color: #fefefe,
      link-color: #d4e
  )
);

/* map-get */
$social-colors: (
  dribble: #ea4c89,
  facebook: #3b5998,
  github: #171515,
  google: #db4437,
  twitter: #55acee
);
.btn-dribble{
  color: map-get($social-colors,facebook);
}
/* 没有值不会报错 */
.btn-weibo{
  font-size: 12px;
  color: map-get($social-colors,weibo);
}

/* map中的容错函数 */
@function colors($color){
  @if not map-has-key($social-colors,$color){
      @warn "No color found for `#{$color}` in $social-colors map. Property omitted.";
  }
  @return map-get($social-colors,$color);
}
.btn-dribble {
  color: colors(dribble);
}
/* each 遍历 map */
@each $name in map-keys($social-colors){
  .btn-#{$name}{
      color: colors($name);
  }
}
@for $i from 1 through length(map-keys($social-colors)){
  .btn-#{nth(map-keys($social-colors),$i)} {
    color: colors(nth(map-keys($social-colors),$i));
  }
}

map-values($social-colors)
/*得到所有的值*/
$color: (
  text: #f36,
  link: #f63,
  border: #ddd,
  backround: #fff
);
$typo:(
  font-size: 12px,
 line-height: 1.6
);
$newcolor = map-merge($color, $typo);
/* 得到新值 */
$map:map-remove($social-colors,dribble);

颜色函数
rgb
rgba
red
green
blue
mix 混合两种颜色第三个参数为第一种颜色的比例 mix(blue,red,20%)
lighten lighten(red, 20%);
darken darken(red,30%);
saturate 改变颜色的饱和度参数单位为百分比 saturate(blue,20%)
desaturate
adjust-hue 通过调整色相 adjust-hue(blue,30deg)
grayscale 直接让饱和度为0 grayscale(blue);
alpha 获取透明度
opacity 获取透明度
rgba
opacify 增加透明度
fade-in 增加透明度
transparentize 减少透明度
fade-out 减少透明度

<ul class="swatches red">
  <li></li>
  ...      
  <li></li>
</ul>
<ul class="swatches orange">
  <li></li>
  …
  <li></li>
</ul>
<ul class="swatches yellow">
  <li></li>
  …
  <li></li>
</ul>
<ul class="swatches green">
  <li></li>
  …
  <li></li>
</ul>
<ul class="swatches blue">
  <li></li>
  …
  <li></li>
</ul>
<ul class="swatches purple">
  <li></li>
  …
  <li></li>
</ul>
$redBase: #DC143C;
$orangeBase: saturate(lighten(adjust_hue($redBase, 39), 5), 7);//#f37a16
$yellowBase: saturate(lighten(adjust_hue($redBase, 64), 6), 13);//#fbdc14
$greenBase: desaturate(darken(adjust_hue($redBase, 102), 2), 11);//#73c620
$blueBase: saturate(darken(adjust_hue($redBase, 201), 2), 1);//#12b7d4
$purpleBase: saturate(darken(adjust_hue($redBase, 296), 2), 1);//#a012d4
$blackBase: #777;
$bgc: #fff;

//定义颜色变暗的 mixin
@mixin swatchesDarken($color) {
  @for $i from 1 through 10 {
    $x:$i+11;
    li:nth-child(#{$x}) {
      $n:$i*5;
      $bgc:darken($color,$n); //颜色变暗
      background-color: $bgc;
      &:hover:before { //hover状态显示颜色编号
        content: "#{$bgc}";
        color: lighten($bgc,40);
        font-family: verdana;
        font-size: 8px;
        padding: 2px;
      }
    }
  }
}
//定义颜色变亮的 mixin
@mixin swatchesLighten($color) {
  @for $i from 1 through 10 {
    $x:11-$i;
    li:nth-child(#{$x}) {
      $n:$i*5;
      $bgc:lighten($color,$n);
      background-color: $bgc;
      &:hover:before {
        content: "#{$bgc}";
        color: darken($bgc,40);
        font-family: verdana;
      font-size: 8px;
       padding: 2px;
      }
    }
  }
}

.swatches li {    
  width: 4.7619047619%;
  float: left;
  height: 60px;
  list-style: none outside none;
}

ul.red {
  @include swatchesLighten($redBase);
  @include swatchesDarken($redBase);
  li:nth-child(11) {
   background-color: $redBase;
  }
}

ul.orange {
  @include swatchesLighten($orangeBase);
  @include swatchesDarken($orangeBase);
  li:nth-child(11) {
    background-color: $orangeBase;
  }
}

ul.yellow {
  @include swatchesLighten($yellowBase);
  @include swatchesDarken($yellowBase);
  li:nth-child(11) {
    background-color: $yellowBase;
  }
}

ul.green {
  @include swatchesLighten($greenBase);
  @include swatchesDarken($greenBase);
  li:nth-child(11) {
    background-color: $greenBase;
  }
}

ul.blue {
  @include swatchesLighten($blueBase);
  @include swatchesDarken($blueBase);
  li:nth-child(11) {
    background-color: $blueBase;
  }
}

ul.purple {
  @include swatchesLighten($purpleBase);
  @include swatchesDarken($purpleBase);
  li:nth-child(11) {
    background-color: $purpleBase;
  }
}

ul.black {
  @include swatchesLighten($blackBase);
  @include swatchesDarken($blackBase);
  li:nth-child(11) {
    background-color: $blackBase;
  }
}

Sass的@规则

@import
@media
.sidebar {
 width: 300px;
  @media screen and (orientation: landscape) {
   width: 500px;
  }
}
@media screen {
  .sidebar {
    @media (orientation: landscape) {
      width: 500px;
    }
  }
}

$media: screen;
$feature: -webkit-min-device-pixel-ratio;
$value: 1.5;

@media #{$media} and ($feature: $value) {
  .sidebar {
    width: 500px;
  }
}
@extend
@at-root
@debug
@warn
@error
@content
$small : 750px;
@mixin  onsmall {
  @media  only screen and (max-width: $small){
    @content;
  }
}

.navbar-content{
  max-width:980px;
  @include onsmall {
    min-width:320px;
  }
}
@mixin useRem($size){
  $device-list : 320px, 375px , 414px;
  html{
    @each $device in $device-list{
      @media screen and (min-width: $device){
        font-size: 100px * ($device/$size);
      }
    }
  }
}
@include useRem(750px);

css预处理器：sass

用心写代码，不辜负程序员之名。

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

程序员

Web 前端开发