Sass学习笔记之入门篇

时间  2019-11-20
标签 sass 学习 笔记 入门 繁體版
原文   原文链接

Sass又名SCSS，是CSS预处理器之一，，它能用来清晰地、结构化地描述文件样式，有着比普通 CSS 更增强大的功能。 Sass 可以提供更简洁、更优雅的语法，同时提供多种功能来建立可维护和管理的样式表。如下是个人学习笔记。css

Sass安装环境

1.安装sass(mac)html

①：Ruby安装web

②：安装sasschrome

sudo gem install sass

能够经过 sass -v检测是否完成安装  json

2.更新sassgulp

gem update sass

3.卸载（删除）sass浏览器

gem uninstall sass

 Sass编译调试sass

咱们如今通常采用scss语法格式。SCSS 是 Sass 的新语法格式，从外形上来判断他和 CSS 长得几乎是如出一辙，代码都包裹在一对大括号里，而且末尾结束处都有一个分号。其文件名格式以“.scss”为扩展名。注意文件扩展名不能用.sass。koa

使用 Sass 进行开发,项目中仍是引用“.css”文件.Sass 只不过是作为一个预处理工具，提早帮你作事情，只有你须要时候，它才有攻效。 Sass 开发以后，要让 Web 页面能调用 Sass 写好的东西，就得有一个编译过程。ide

编译方式

1.命令编译：命令编译是指使用你电脑中的命令终端，经过输入 Sass 指令来编译 Sass。这种编译方式是最直接也是最简单的一种方式。

①单文件编译：(开启“watch”功能，这样只要你的代码进行任保修改，都能自动监测到代码的变化，而且给你直接编译出来：)

sass --watch <要编译的Sass文件路径>/style.scss:<要输出CSS文件路径>/style.css  （style是文件的名字）

②多文件编译：（对整个项目全部 Sass 文件编译成 CSS 文件，而且将这些 CSS 文件都放在项目中“css”文件夹中） 

sass --watch sass/:css/

2.GUI界面工具编译

3.自动化编译

如下分别经过Grunt和Gulp来配置Sass的编译

①：Grunt 配置 Sass 编译的示例代码

module.exports = function(grunt) {
    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),
        sass: {
            dist: {
                files: {
                    'style/style.css' : 'sass/style.scss'
                }
            }
        },
        watch: {
            css: {
                files: '**/*.scss',
                tasks: ['sass']
            }
        }
    });
    grunt.loadNpmTasks('grunt-contrib-sass');
    grunt.loadNpmTasks('grunt-contrib-watch');
    grunt.registerTask('default',['watch']);
}
View Code

②：Gulp 配置 Sass 编译的示例代码

var gulp = require('gulp');
var sass = require('gulp-sass');

gulp.task('sass', function () {
    gulp.src('./scss/*.scss')
        .pipe(sass())
        .pipe(gulp.dest('./css'));
});

gulp.task('watch', function() {
    gulp.watch('scss/*.scss', ['sass']);
});

gulp.task('default', ['sass','watch']);
View Code

编译错误：

在Sass的编译的过程当中，是否是支持“GBK”编码的。因此在建立 Sass 文件时，就须要将文件编码设置为“utf-8”，在项目中文件命名或者文件目录命名不要使用中文字符。

不一样样式风格的输出方法

一、嵌套输出方式 nested，在编译的时候带上参数“ --style nested”:

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

 

二、展开输出方式 expanded,在编译的时候带上参数“ --style expanded”:

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

三、紧凑输出方式 compact，在编译的时候带上参数“ --style compact”:

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

4.压缩输出方式 compressed，在编译的时候带上参数“ --style compressed”:

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

 

一段时间以后，你实际上就再也不须要写 CSS 代码了，只用写 Sass 代码。在这种状况下，你只须要设定输出格式为压缩格式，知道输出的 CSS 代码能够直接使用便可。

Sass的调试 

这张图表示的是，在chrome浏览器上改动相应的scss的样式，效果会实时同步出来，而且改动的代码会保存到本地。实现的方法能够看这个教程。

如今实现并非一件难事，只要你的浏览器支持“sourcemap”功能便可。早一点的版本，须要在编译的时候添加“--sourcemap”  参数：

sass --watch --scss --sourcemap style.scss:style.css

在 Sass3.3 版本之上，不须要添加这个参数也能够：

sass --watch style.scss:style.css

Sass的基本特性-基础

变量

声明变量

定义以后能够在全局范围内使用。
$fontSize: 12px;
body{
    font-size:$fontSize;
}

编译后的css代码：
body{
    font-size:12px;
}
普通变量 
$baseLineHeight:1.5 !default;
body{
    line-height: $baseLineHeight; 
}

编译后的css代码：
body{
    line-height:1.5;
}
默认变量（!default） 
//SCSS
$color: orange !default;//定义全局变量(在选择器、函数、混合宏...的外面定义的变量为全局变量)
.block {
  color: $color;//调用全局变量
}
em {
  $color: red;//定义局部变量
  a {
    color: $color;//调用局部变量
  }
}
span {
  color: $color;//调用全局变量
}
全局变量与局部变量

嵌套

应该少用。

一、选择器嵌套

假设咱们有一段这样的结构：
<header>
<nav>
    <a href=“##”>Home</a>
    <a href=“##”>About</a>
    <a href=“##”>Blog</a>
</nav>
<header>

想选中 header 中的 a 标签，在写 CSS 会这样写：
nav a {
  color:red;
}

header nav a {
  color:green;
}

那么在 Sass 中，就可使用选择器的嵌套来实现：
nav {
  a {
    color: red;

    header & {
      color:green;
    }
  }  
}
选择器嵌套

二、属性嵌套

Sass 中还提供属性嵌套，CSS 有一些属性前缀相同，只是后缀不同，好比：border-top/border-right，与这个相似的还有 margin、padding、font 等属性。假设你的样式中用到了：
.box {
    border-top: 1px solid red;
    border-bottom: 1px solid green;
}

在 Sass 中咱们能够这样写：
.box {
  border: {
   top: 1px solid red;
   bottom: 1px solid green;
  }
}
属性嵌套

三、伪类嵌套：伪类嵌套和属性嵌套很是相似，只不过它须要借助`&`符号一块儿配合使用

咱们就拿经典的“clearfix”为例吧：
.clearfix{
&:before,
&:after {
    content:"";
    display: table;
  }
&:after {
    clear:both;
    overflow: hidden;
  }
}

编译出来的 CSS：
clearfix:before, .clearfix:after {
  content: "";
  display: table;
}
.clearfix:after {
  clear: both;
  overflow: hidden;
}
伪类嵌套 

混合宏

在 Sass 中，使用“@mixin”来声明一个混合宏

不带参数混合宏：
@mixin border-radius{
    -webkit-border-radius: 5px;
    border-radius: 5px;
}
大括号里面是复用的样式代码。

带参数混合宏：
@mixin border-radius($radius:5px){
    -webkit-border-radius: $radius;
    border-radius: $radius;
}
声明

使用“@include”来调用一个混合宏

@mixin border-radius{
    -webkit-border-radius: 3px;
    border-radius: 3px;
}

--------调用---------
button {
    @include border-radius;
}

这个时候编译出来的 CSS:

button {
  -webkit-border-radius: 3px;
  border-radius: 3px;
}
调用

混合宏的参数--传一个不带值的参数

在混合宏中，能够传一个不带任何值的参数，好比：
@mixin border-radius($radius){
  -webkit-border-radius: $radius;
  border-radius: $radius;
}
在混合宏“border-radius”中定义了一个不带任何值的参数“$radius”。

在调用的时候能够给这个混合宏传一个参数值：
.box {
  @include border-radius(3px);
}


编译出来的 CSS:
.box {
  -webkit-border-radius: 3px;
  border-radius: 3px;
}
传一个不带值的参数

混合宏的参数--传一个带值的参数

在 Sass 的混合宏中，还能够给混合宏的参数传一个默认值，例如：
@mixin border-radius($radius:3px){
  -webkit-border-radius: $radius;
  border-radius: $radius;
}

在调用相似这样的混合宏时，会多有一个机会，假设你的页面中的圆角不少地方都是“3px”的圆角，那么这个时候只须要调用默认的混合宏“border-radius”:
.btn {
  @include border-radius;
}

编译出来的 CSS:
.btn {
  -webkit-border-radius: 3px;
  border-radius: 3px;
}
View Code

混合宏的参数--传多个参数

Sass 混合宏除了能传一个参数以外，还能够传多个参数，如：
@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);
}

编译出来 CSS:
.box-center {
  width: 500px;
  height: 300px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -150px;
  margin-left: -250px;
}
传多个参数

扩展/继承

在 Sass 中是经过关键词 “@extend”来继承已存在的类样式块，从而实现代码的继承。

//SCSS
.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;
}

编译出来以后：
//CSS
.btn, .btn-primary, .btn-second {
  border: 1px solid #ccc;
  padding: 6px 10px;
  font-size: 14px;
}

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

.btn-second {
  background-clor: orange;
  color: #fff;
}
扩展/继承

 占位符 %：经过 @extend 调用的占位符才会产生效果，编译出来的代码会将相同的代码合并在一块儿。

%placeholder 声明的代码，若是不被 @extend 调用的话，不会产生任何代码。
//SCSS
%mt5 {
  margin-top: 5px;
}
%pt5{
  padding-top: 5px;
}

.btn {
  @extend %mt5;
  @extend %pt5;
}

.block {
  @extend %mt5;

  span {
    @extend %pt5;
  }
}
编译出来的CSS

//CSS
.btn, .block {
  margin-top: 5px;
}

.btn, .block span {
  padding-top: 5px;
}

从编译出来的 CSS 代码能够看出，经过 @extend 调用的占位符，编译出来的代码会将相同的代码合并在一块儿。这也是咱们但愿看到的效果，也让你的代码变得更为干净。
View Code

混合宏 VS 继承 VS 占位符

他们各有各的优势与缺点，先来看看他们使用效果：

a) Sass 中的混合宏使用
@mixin mt($var){
  margin-top: $var;  
}

.block {
  @include mt(5px);

  span {
    display:block;
    @include mt(5px);
  }
}

.header {
  color: orange;
  @include mt(5px);

  span{
    display:block;
    @include mt(5px);
  }
}

---编译出来的结果---
.block {
  margin-top: 5px; }
  .block span {
    display: block;
    margin-top: 5px; }

.header {
  color: orange;
  margin-top: 5px; }
  .header span {
    display: block;
    margin-top: 5px; }

总结：编译出来的 CSS 清晰告诉了你们，他不会自动合并相同的样式代码，若是在样式文件中调用同一个混合宏，会产生多个对应的样式代码，形成代码的冗余，这也是 CSSer 没法忍受的一件事情。不过他并非一无事处，他能够传参数。

我的建议：若是你的代码块中涉及到变量，建议使用混合宏来建立相同的代码块。
混合宏(须要传参，用它) 
.mt{
  margin-top: 5px;  
}

.block {
  @extend .mt;

  span {
    display:block;
    @extend .mt;
  }
}

.header {
  color: orange;
  @extend .mt;

  span{
    display:block;
    @extend .mt;
  }
}

----编辑之后----
.mt, .block, .block span, .header, .header span {
  margin-top: 5px;
}

.block span {
  display: block;
}

.header {
  color: orange;
}
.header span {
  display: block;
}

总结：使用继承后，编译出来的 CSS 会将使用继承的代码块合并到一块儿，经过组合选择器的方式向你们展示，好比 .mt, .block, .block span, .header, .header span。这样编译出来的代码相对于混合宏来讲要干净的多，也是 CSSer 指望看到。可是他不能传变量参数。

我的建议：若是你的代码块不须要专任何变量参数，并且有一个基类已在文件中存在，那么建议使用 Sass 的继承。
继承（没有参数，并且有一个基类已在文件中存在，用它） 
%mt{
  margin-top: 5px;  
}

.block {
  @extend %mt;

  span {
    display:block;
    @extend %mt;
  }
}

.header {
  color: orange;
  @extend %mt;

  span{
    display:block;
    @extend %mt;
  }
}

-----编译之后-------
.block, .block span, .header, .header span {
  margin-top: 5px;
}

.block span {
  display: block;
}

.header {
  color: orange;
}
.header span {
  display: block;
}

总结：编译出来的 CSS 代码和使用继承基本上是相同，只是不会在代码中生成占位符 mt 的选择器。那么占位符和继承的主要区别的，“占位符是独立定义，不调用的时候是不会在 CSS 中产生任何代码；继承是首先有一个基类存在，无论调用与不调用，基类的样式都将会出如今编译出来的 CSS 代码中。”
占位符（和继承没有大的区别，只是占位符是独立定义，不调用的时候是不会在 CSS 中产生任何代码）

注释

一、相似 CSS 的注释方式，使用 ”/* ”开头，结属使用 ”*/ ”
二、相似 JavaScript 的注释方式，使用“//”

二者区别，前者会在编译出来的 CSS 显示，后者在编译出来的 CSS 中不会显示，来看一个示例：

//定义一个占位符

%mt5 {
  margin-top: 5px;
}

/*调用一个占位符*/

.box {
  @extend %mt5;
}
编译出来的CSS

.box {
  margin-top: 5px;
}

/*调用一个占位符*/
注释

Sass的基本特性-运算

加法运算是 Sass 中运算中的一种，在变量或属性中均可以作加法运算。如：

.box {
  width: 20px + 8in;
}

编译出来的 CSS:
.box {
  width: 788px;
}
但对于携带不一样类型的单位时，在 Sass 中计算会报错，以下例所示：

.box {
  width: 20px + 1em;
}
编译的时候，编译器会报错：“Incompatible units: 'em' and ‘px'.”

总结：in mm cm  pt pc px等绝对单位都能运算；
ex em rem等相对当前字体的都不能运算
能换算的都会换算成px像素长度
不能换算的都会报编译错误
有个例外就是不加单位的话就至关于0
加法 
Sass 的减法运算和加法运算相似，咱们经过一个简单的示例来作阐述：
$full-width: 960px;
$sidebar-width: 200px;

.content {
  width: $full-width -  $sidebar-width;
}
编译出来的 CSS 以下：

.content {
  width: 760px;
}
减法 
Sass 中的乘法运算和前面介绍的加法与减法运算还略有不一样。虽然他也可以支持多种单位（好比 em ,px , %），但当一个单位同时声明两个值时会有问题。好比下面的示例：

.box {
  width:10px * 2px;  
}
编译的时候报“20px*px isn't a valid CSS value.”错误信息。

若是进行乘法运算时，两个值单位相同时，只须要为一个数值提供单位便可。上面的示例能够修改为：

.box {
  width: 10px * 2;
}
编译出来的 CSS:

.box {
  width: 20px;
}
乘法 
”/  ”符号被看成除法运算符时有如下几种状况：
•    若是数值或它的任意部分是存储在一个变量中或是函数的返回值。
•    若是数值被圆括号包围。
•    若是数值是另外一个数学表达式的一部分。

以下所示：

//SCSS
p {
  font: 10px/8px;             // 纯 CSS，不是除法运算
  $width: 1000px;
  width: $width/2;            // 使用了变量，是除法运算
  width: round(1.5)/2;        // 使用了函数，是除法运算
  height: (500px/2);          // 使用了圆括号，是除法运算
  margin-left: 5px + 8px/2px; // 使用了加（+）号，是除法运算
}
编译出来的CSS

p {
  font: 10px/8px;
  width: 500px;
  height: 250px;
  margin-left: 9px;
 }


在除法运算时，若是两个值带有相同的单位值时，除法运算以后会获得一个不带单位的数值。以下所示：
.box {
  width: (1000px / 100px);
}
编译出来的CSS以下：

.box {
  width: 10;
}
除法
相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程