美文网首页
使用SASS

使用SASS

作者: 张先森Mr_zhang | 来源:发表于2017-07-04 15:57 被阅读0次

    1. 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那样去写.

    2. sass安装

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

    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

    3. 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} ";
}

    4. 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;
}

    5. 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;
  }
}

    6. 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);

    相关文章

      网友评论

          本文标题：使用SASS

          本文链接：https://www.haomeiwen.com/subject/eulxhxtx.html

          延伸阅读

          深度阅读

          • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

          栏目导航

          热点阅读

          关于我们|服务条款|联系我们|使用SASS|投稿指南|网站地图|RSS订阅|排版工具|手机版

          提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

          Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

          备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

          本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

          所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！