来自 计算机前端 2019-11-30 05:46 的文章
当前位置: 美高梅4858官方网站 > 计算机前端 > 正文

sass入门教程指南,前端css框架SASS使用教程

SASS入门教程及用法指南,sass入门教程指南

作为前端开发职员,你料定对css很熟习,可是你驾驭css能够自定义吗?我们都精晓,js中能够自定义变量,css仅仅是三个标识语言,不是编制程序语言,因而不得以自定义变量,不得以援用等等。直面那一个标题,大家以后来推举多少个SASS,由此可以预知,他是css的进级换代版,他能够自定义变量,能够有if语句,还足以嵌套等等,很玄妙啊!那上边我们就来介绍那么些美妙的SASS!

美高梅4858官方网站 1

前端css框架SASS使用教程(转),csssass

一、什么是SASS

SASS是风华正茂种CSS的开荒工具,提供了多数有利的写法,大大节约了设计者的年月,使得CSS的花费,变得轻巧和可保险。 本文化总同盟结了SASS的首要用法。笔者的对象是,有了那篇小说,平常的日常采用就没有必要去看官方文书档案了。

一、什么是SASS

 

SASS是生龙活虎种CSS的开辟工具,提供了成都百货上千有益于的写法,大大节约了设计者的岁月,使得CSS的开垦,变得轻易和可保护。

正文化总同盟结了SASS的显要用法。笔者的指标是,有了那篇文章,日常的平时采用就无需去看官方文书档案了。

二、安装和选拔

 

2.1 安装

SASS是Ruby语言写的,不过两岸的语法未有涉嫌。不懂Ruby,照样使用。只是必得先安装Ruby,然后再安装SASS。

window下边安装ruby

下载rubyinstaller.exe 安装就足以了。

mac上面安装ruby

$ curl -L https://get.rvm.io | bash -s stable

$ source ~/.rvm/scripts/rvm

 $ rvm -v

$ rvm install 2.0.0

$ gem -v

能够见到版本号,表明安装成功!

倘使你已经安装好了Ruby,接着在命令行输入上边包车型大巴下令:

gem install sass

下一场,就能够使用了。

若gem命令骑行错误,请看 

二、安装和行使

 

2.1 安装

SASS是Ruby语言写的,不过双方的语法未有涉嫌。不懂Ruby,照样使用。只是必需先安装Ruby,然后再设置SASS。

假诺你曾经设置好了Ruby,接着在命令行输入下边包车型大巴通令:

  gem install sass

接下来,就可以应用了。

2.2 使用

SASS文件正是管见所及的文件文件,里面可以直接运用CSS语法。文件后缀名是.scss,意思为Sassy CSS。

上面包车型地铁下令,能够在显示屏上展现.scss文件转载的css代码。(假设文件名称叫test。)

  sass test.scss

假使要将体现结果保存成文件,后边再跟三个.css文件名。

  sass test.scss test.css

SASS提供多少个编写翻译风格的选项:

  * nested:嵌套缩进的css代码,它是默认值。
  * expanded:没有缩进的、扩展的css代码。
  * compact:简洁格式的css代码。
  * compressed:压缩后的css代码。

传延宗族条件当中,平日接纳最终叁个采摘。

  sass --style compressed test.sass test.css

您也能够让SASS监听有些文件或目录,生龙活虎旦源文书有变动,就自动生成编写翻译后的本子。

  // watch a file
  sass --watch input.scss:output.css
  // watch a directory
  sass --watch app/sass:public/stylesheets

SASS的官网,提供了七个在线转变器。你可以在这里边,试运作上面包车型大巴各样例子。

 

2.2 使用

SASS文件便是平时的公文文件,里面能够一向运用CSS语法。文件后缀名是.scss,意思为Sassy CSS。 下边包车型客车一声令下,可以在显示屏上展现.scss文件转发的css代码。(假如文件名称叫test。)

sass test.scss

若是要将显得结果保存成文件,后边再跟一个.css文件名。

sass test.scss test.css

SASS提供八个编写翻译风格的选项:

* nested:嵌套缩进的css代码,它是默认值。
* expanded:没有缩进的、扩展的css代码。
* compact:简洁格式的css代码。
* compressed:压缩后的css代码。

临蓐意况当中,日常接收最终三个精选。

sass --style compressed test.sass test.css

你也足以让SASS监听有个别文件或目录,生龙活虎旦源文件有改观,就自动生成编写翻译后的版本。

// watch a file
sass --watch input.scss:output.css
// watch a directory
sass --watch app/sass:public/stylesheets

SASS的官方网站,提供了一个在线转变器。你能够在此,试运作上边的各个例子。

三、基本用法

 

3.1 变量

SASS允许选择变量,全体变量以$开首。

  $blue : #1875e7; 
  div {
   color : $blue;
  }

若是变量供给镶嵌在字符串之中,就一定要要求写在#{}之中。

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

3.2 计算作用

SASS允许在代码中使用算式:

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

3.3 嵌套

SASS允许选拔器嵌套。比如,下边的CSS代码:

  div h1 {
    color : red;
  }

能够写成:

  div {
    hi {
      color:red;
    }
  }

品质也足以嵌套,举例border-color属性,能够写成:

  p {
    border: {
      color: red;
    }
  }

留意,border后边总得抬高冒号。

在嵌套的代码块内,可以行使&援引父成分。比方a:hover伪类,能够写成:

  a {
    &:hover { color: #ffb3ff; }
  }

3.4 注释

SASS共有三种注释风格。

标准的CSS注释 /* comment */ ,会保留到编译后的公文。

单行注释 // comment,只保留在SASS源文件中,编写翻译后被略去。

在/*末端加贰个感叹号,表示那是"重要注释"。固然是裁减形式编译,也会保留那行注释,平日能够用于注解版权新闻。

  /*! 
    重要注释!
  */

三、基本用法

四、代码的重用

 

4.1 继承

SASS允许三个选取器,袭承另多个接受器。比方,现成class1:

  .class1 {
    border: 1px solid #ddd;
  }

class2要世襲class1,就要选取@extend命令:

  .class2 {
    @extend .class1;
    font-size:120%;
  }

4.2 Mixin

Mixin有一点点像C语言的宏(macro),是能够引用的代码块。

运用@mixin命令,定义三个代码块。

  @mixin left {
    float: left;
    margin-left: 10px;
  }

采用@include命令,调用那些mixin。

  div {
    @include left;
  }

mixin的有力的地方,在于能够钦点参数和缺省值。

  @mixin left($value: 10px) {
    float: left;
    margin-right: $value;
  }

美高梅4858官方网站,运用的时候,依据供给参预参数:

  div {
    @include left(20px);
  }

上面是二个mixin的实例,用来变化浏览器前缀。

  @mixin rounded($vert, $horz, $radius: 10px) {
    border-#{$vert}-#{$horz}-radius: $radius;
    -moz-border-radius-#{$vert}#{$horz}: $radius;
    -webkit-border-#{$vert}-#{$horz}-radius: $radius;
  }

利用的时候,可以像下面这样调用:

  #navbar li { @include rounded(top, left); }
  #footer { @include rounded(top, left, 5px); }

4.3 颜色函数

SASS提供了有个别平放的水彩函数,以便生成体系颜色。

  lighten(#cc3, 10%) // #d6d65c
  darken(#cc3, 10%) // #a3a329
  grayscale(#cc3) // #808080
  complement(#cc3) // #33c

4.4 插入文件

@import命令,用来插入外界文件。

  @import "path/filename.scss";

假使插入的是.css文件,则相符css的import命令。

  @import "foo.css";

3.1 变量

SASS允许行使变量,全体变量以$起先。

$blue : #1875e7; 
div {
   color : $blue;
}

尽管变量须要镶嵌在字符串之中,就务须要求写在#{}之中。

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

五、高等用法

 

5.1 条件语句

@if能够用来推断:

  p {
    @if 1 + 1 == 2 { border: 1px solid; }
    @if 5 < 3 { border: 2px dotted; }
  }

配套的还应该有@else命令:

  @if lightness($color) > 30% {
    
  } @else {
    background-color: #fff;
  }

5.2 循环语句

SASS支持for循环:

  @for $i from 1 to 10 {
    .border-#{$i} {
      border: #{$i}px solid blue;
    }
  }

也支持while循环:

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

each命令,作用与for类似:

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

5.3 自定义函数

SASS允许客商编写本人的函数。

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

原版的书文地址:

生龙活虎、什么是SASS SASS是后生可畏种CSS的开拓工具,提供了不稀少助于的写法,大大节省了设计者的岁月,使得...

3.2 总计作用

SASS允许在代码中使用算式:

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

3.3 嵌套

SASS允许采取器嵌套。例如,上面的CSS代码:

  div h1 {
    color : red;
  }
//可以写成:
  div {
    hi {
      color:red;
    }
  }
//属性也可以嵌套,比如border-color属性,可以写成:
  p {
    border: {
      color: red;
    }
  }

//注意,border后面必须加上冒号。

在嵌套的代码块内,能够动用$引用父成分。譬如a:hover伪类,能够写成:

a {
    &:hover { color: #ffb3ff; }
  }

3.4 注释

SASS共有三种注释风格。

业内的CSS注释 / comment / ,会保留到编写翻译后的文件。

单行注释 // comment,只保留在SASS源文件中,编写翻译后被归纳。

在/*末尾加一个惊叹号,表示那是"首要注释"。就算是压缩形式编写翻译,也会保留那行注释,平常可以用于注明版权音信。

/*! 
    重要注释!
*/

本文由美高梅4858官方网站发布于计算机前端,转载请注明出处:sass入门教程指南,前端css框架SASS使用教程

关键词: