简介

Sass 有两种语法规则(syntaxes),目前新的语法规则(从 Sass 3开始)被称为 “SCSS”( 时髦的css(Sassy CSS)),它是css3语法的的拓展级,就是说每一个语法正确的CSS3文件也是合法的SCSS文件,SCSS文件使用.scss作为拓展名。第二种语法别成为缩进语法(或者 Sass),它受到了Haml的简洁精炼的启发,它是为了人们可以用和css相近的但是更精简的方式来书写css而诞生的。它没有括号,分号,它使用 行缩进 的方式来指定css 块,虽然sass不是最原始的语法,但是缩进语法将继续被支持,在缩进语法的文件以 .sass 为拓展名。

注释

有三种形式:

(1)//comment:该注释只是在.scss源文件中有,编译后的css文件中没有。

(2)//:重要注释,任何style的css文件中都会有,一般放置css文件版权说明等信息。

(3)/ /:该注释在compressed的style的css中没有,其他style的css文件都会含有。

Quick Start

Installation

Build

1.切换到.scss文件所在目录

命令行下切换到代码文件夹目录(如Z:\),假设有文件test.scss文件,里面内容如下:(SASS完全支持css语法)

h1{
font-size:17px;
}
h2{
font-size:18px;
}

2.编译scss文件为css文件

  运行命令:sass --style compressed test.scss test.css,即可生成压缩版的css文件,并且命名为test.css。几点说明:

(1)--style 后面可以有四个参数可选,分别为expanded、nested、compact、compressed,分别选用不同参数的效果可以自己尝试体验。

(2)test.scss和test.css文件目录可以自定义,例如把Z盘sass目录下的test.scss文件编译为压缩版的文件,并放置在Z盘css目录下,那么命令即:sass --style compressed z:\sass\test.scss z:\css\test.css

(3)开发过程中,只需要修改scss文件,然后编译;前端页面只需要引用相应的css文件即可。

3.侦听文件和文件夹

如果希望某一个scss文件或者相应的文件夹下面文件修改后,自动进行编译,那么可以使用侦听命令。

(1)侦听文件:

sass --watch --style compressed test.scss:test.css

当test.scss文件有修改后,会自动编译为test.css,并且是compressed的。

(2)侦听文件夹:

sass --watch --style compressed sass:css

当sass文件夹下.scss文件有修改的时候,会自动编译为与sass中文件同名的css文件。

备注:

(1)注意源文件和目标文件之间是冒号,与编译命令中为空格不同。

(2)生成的map文件可以查找source map文件的作用。

Webpack

Webpack中也内置了sass-loader,通过简单的配置既可以使用。不过需要注意的是,Webpack的sass-loader还是依赖于node-sass以及sass(gem),所以如果安装sass-loader报错可以先尝试安装sass。

变量与选择器

变量

定义

变量的定义一般以$开头,某个变量的作用域仅限于他们定义的层级以及子层级。如果变量是定义在所有嵌套选择器之外的,那么他们可以在各处被调用。

$color1:#aeaeae;
.div1{
background-color:$color1;
}

编译后:

.div1 {
background-color: #aeaeae;
}
/*# sourceMappingURL=test.css.map */

如果希望某个在子选择器中定义的变量能够成为全局变量,可以使用!global关键字:

#main {
$width: 5em !global;
width: $width;
} #sidebar {
width: $width;
}

嵌套引用

嵌套引用在其他编程语言中即是字符串插值,需要用#{}进行包裹:

$left:left;
.div1{
border-#{$left}-width:5px;
}

变量计算

Sass中也是支持对于变量进行简单的计算:

$left:20px;
.div1{
margin-left:$left+12px;
}

变量可以支持计算的类型,还是比较多的:

p {
font: 10px/8px; // Plain CSS, no division
$width: 1000px;
width: $width/2; // Uses a variable, does division
width: round(1.5)/2; // Uses a function, does division
height: (500px/2); // Uses parentheses, does division
margin-left: 5px + 8px/2px; // Uses +, does division
font: (italic bold 10px/8px); // In a list, parentheses don't count
}

选择器

嵌套

.div1{
.span1{
height: 12px;
}
.div2{
width: 16px;
}
}

属性也可以嵌套,比如border-color属性,可以写成:

  p {
    border: {
      color: red;
    }
  }

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

父元素引用

在嵌套的子层级中,允许使用&引用父元素:

.div1{
&:hover{
cursor: hand;
}
}

代码重用

继承

SASS允许一个选择器,继承另一个选择器。比如,现有class1:

.class1{
font-size:19px;
}
.class2{
@extend .class1;
color:black;
}

注意:如果在class2后面有设置了class1的属性,那么也会影响class2,如下:

.class1{
font-size:19px;
}
.class2{
@extend .class1;
color:black;
}
.class1{
font-weight:bold;
}

由此可以看出Scss也是递归编译的。

引用外部css文件(Partials)

有时网页的不同部分会分成多个文件来写样式,或者引用通用的一些样式,那么可以使用@import。

@import "_test1.scss";
@import "_test2.scss";
@import "_test3.scss";

Mixin&Include

Mixin有点像C语言的宏(macro),是可以重用的代码块。

使用@mixin命令,定义一个代码块。

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

使用@include命令,调用这个mixin。

  div {
    @include left;
  }

参数与缺省值

  • 边距设置

@mixin common($value1,$value2,$defaultValue:12px){
display:block;
margin-left:$value1;
margin-right:$value2;
padding:$defaultValue;
}
.class1{
font-size:16px;
@include common(12px,13px,15px);
}
.class2{
font-size:16px;
@include common(12px,13px);
}
  • 浏览器前缀设置设置

下面是一个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); }

编程式方法

流程控制

条件语句

@if可以用来判断:

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

配套的还有@else命令:

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

循环语句

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");
    }
  }

函数

Sass允许用户自定义函数,原型如下所示:

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

颜色函数

SASS提供了一些内置的颜色函数,以便生成系列颜色。

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

参考

原文链接:https://segmentfault.com/a/1190000003742313

前端之Sass/Scss实战笔记的更多相关文章

  1. 前端编码规范(4)—— CSS 和 Sass (SCSS) 规范

    CSS and Sass (SCSS) style rules ID and class naming ID和class(类)名总是使用可以反应元素目的和用途的名称,或其他通用名称.代替表象和晦涩难懂 ...

  2. 前端程序员学习 Golang gin 框架实战笔记之一开始玩 gin

    原文链接 我是一名五六年经验的前端程序员,现在准备学习一下 Golang 的后端框架 gin. 以下是我的学习实战经验,记录下来,供大家参考. https://github.com/gin-gonic ...

  3. sass个人学习笔记

    Materliu 在慕课的视频: http://www.imooc.com/learn/364 . http://www.imooc.com/wiki/371 sass入门:http://www.w3 ...

  4. sass的学习笔记

    sass初学入门笔记(一) 我本身是个新手,一边学sass一边记下的笔记,可能有点罗嗦,但是复习起来的话还是比较全面直观的.当然,最重要的还是去实践,实践得真理 其它 CSS 预处理器语言: CSS ...

  5. sass/scss 和 less的区别

    一. Sass/Scss.Less是什么? Sass (Syntactically Awesome Stylesheets)是一种动态样式语言,Sass语法属于缩排语法,比css比多出好些功能(如变量 ...

  6. Less、Sass/Scss

    一.Less.Sass/Scss是什么? 1.Less: 是一种动态样式语言. 对CSS赋予了动态语言的特性,如变量.继承.运算.函数. Less 既可以在客户端上运行 (支持IE 6+, Webki ...

  7. 强烈推荐 GitHub 上值得前端学习的开源实战项目

    强烈推荐 GitHub 上值得前端学习的开源实战项目. Vue.js vue-element-admin 是一个后台前端解决方案,它基于和 element-ui 实现 基于 iView 的 Vue 2 ...

  8. sass/scss 和 less对比

    一. Sass/Scss.Less是什么? Sass (Syntactically Awesome Stylesheets)是一种动态样式语言,Sass语法属于缩排语法,比css比多出好些功能(如变量 ...

  9. 2019最新create-react-app创建的react中使用sass/scss,以及在react中使用sass/scss公共变量的方法

    Sass(英文全称:Syntactically Awesome Stylesheets)是一个最初由Hampton Catlin设计并由Natalie Weizenbaum开发的层叠样式表语言.Sas ...

随机推荐

  1. ASP:GB2312格式文本文件转换成UTF-8格式

    '-------------------------------------------------'函数名称:gb2utf_file'作用:利用AdoDb.Stream对象来把GB2312格式文本文 ...

  2. arcconf

    arcconf create 1 logicaldrive max volume 0 31 noprompt 创建 Logical Drive, 这里 0 31 就是之前记录的 Channel, De ...

  3. ios view改变背景图

    一般我们设置 一个view的背景  可以通过  在view上放一个imageView 来显示背景图片 这里介绍另外一种方法 可以直接通过改变view.backgroundColor的值 来达到上面的效 ...

  4. iOS8.0以后的相册

    在 iOS 8.0 后, 使用the Photos framework 代替 the Assets Library framework , The Photos framework 提供更特色和更好的 ...

  5. php 后台权限例子 (mysql 数据表)

    说明   超级管理员的权限最高   可以操作所有的功能   !!!      超级管理员给特定的用户分配对应的权限 下文注解:   用户表 关联 用户组表  每个用户组对应特定的功能权限    !! ...

  6. TriggerPrefab 拖拽物体

    模拟经营类游戏 有一个特点,就是 拖拽物体.常见的有<帝国><红警><部落战争><凯撒大帝>等等 2d 拖拽 大部分都是 用 OnDrag 方法来 拖动 ...

  7. android 数据存储分配的一些事

    应用程序在运行的过程中如果需要向手机上保存数据,一般是把数据保存在SDcard中的.大部分应用是直接在SDCard的根目录下创建一个文件夹,然后把数据保存在该文件夹中.这样当该应用被卸载后,这些数据还 ...

  8. 修改6S Fortran77 代码,建立查找表

      逐像元大气校正,常预先计算查找表(LUT,LookUp Tabel),6S大气辐射传输模式也可以用来计算LUT.但6S源程序输出信息多,且浮点数输出精度低,不利于提取关键信息生成LUT,本文描述了 ...

  9. AngularJS vs. jQuery,看看谁更胜一筹

    http://www.apjs.net/ http://docs.angularjs.cn/api/ng/function 本文由PHP100中文网编译,转载请看文末的转载要求,谢谢合作!除非特别声明 ...

  10. hdu_5719_Arrange(脑洞题)

    题目连接:hdu_5719_Arrange 题意: 给你1-n这 n个数,设一个排列的第i个数为Ai, Bi为A1到Ai的最小值,Ci为C1到Ci的最大值,问你有多少种排列方式,然后输出取模后的答案 ...