Sass知识整理

其他 2018-05-17 09:10:54 阅读次数: 2

1.Sass简介

1.1 什么是 CSS 预处理器？

CSS 预处理器定义了一种新的语言，其基本思想是，用一种专门的编程语言，为 CSS 增加了一些编程的特性，将 CSS 作为目标生成文件，然后开发者就只要使用这种语言进行编码工作。

通俗的说，“CSS 预处理器用一种专门的编程语言，进行 Web 页面样式设计，然后再编译成正常的 CSS 文件，以供项目使用。CSS 预处理器为 CSS 增加一些编程的特性，无需考虑浏览器的兼容性问题”，例如你可以在 CSS 中使用变量、简单的逻辑程序、函数（如右侧代码编辑器中就使用了变量$color）等等在编程语言中的一些基本特性，可以让你的 CSS 更加简洁、适应性更强、可读性更佳，更易于代码的维护等诸多好处。

1.2何为Sass

官方文档： https://www.sass.hk/guide/
官方的介绍：
Sass 是一门高于 CSS 的元语言，它能用来清晰地、结构化地描述文件样式，有着比普通 CSS 更加强大的功能。
Sass 能够提供更简洁、更优雅的语法，同时提供多种功能来创建可维护和管理的样式表。

1.3 Sass 和 Scss 的区别

Sass 和 SCSS 其实是同一种东西，我们平时都称之为 Sass，两者之间不同之处有以下两点：

  1. 文件扩展名不同，Sass 是以“.sass”后缀为扩展名，而 SCSS 是以“.scss”后缀为扩展名
  2. 语法书写方式不同，Sass 是以严格的缩进式语法规则来书写，不带大括号({})和分号(;)，而 SCSS 的语法书写和我们的 CSS 语法书写方式非常类似。

sass语法：
由于 Sass 是基于 Ruby 写出来，所以其延续了 Ruby 的书写规范。在书写 Sass 时不带有大括号和分号，其主要是依靠严格的缩进方式来控制的。如：

 $color: red //定义变量

body
  color: $color

scss语法

$color: red
body {
    color: $color;
}

编译出来的 CSS

body {
    color: red;
}

2. 安装和基本使用

2.1.安装ruby

安装： http://www.ruby-lang.org/zh_cn/downloads/
因为mac是自带ruby的，且是稳定版本，所以有时会需要ruby的管理器，可以到 https://rvm.io/ 进行安装

2.2 安装Sass

默认已经安装好ruby

gem install sass

安装好后可以查看版本

  sass -v

2.3 基本编译

将sass文件转为scss文件

sass-convert   A.sass  A.scss

将scss文件转为sass文件

sass-convert   A.scss  A.sass

将scss或者sass文件转为css文件

sass A.scss

将scss或者sass文件转为特定的css文件

sass A.scss  style.css

将scss或者sass文件实时编译为css文件

sass --watch input.scss:output.css

2.4 常见的界面编译器

Koala (http://koala-app.com/) ——-推荐

Compass.app（http://compass.kkbox.com/）

Scout（http://mhs.github.io/scout-app/）

CodeKit（https://incident57.com/codekit/index.html）

Prepros（https://prepros.io/）

2.5 常见的编译错误

  1. 字符编译

    字体默认为utf-8，不支持“GBK”编码

  2. 中文字符

    路径应该避免中文字符

2.6 不同样式风格的输出方法

  1. 嵌套输出方式 nested
  2. 展开输出方式 expanded
  3. 紧凑输出方式 compact

  4. 压缩输出方式 compressed

    在编译的时候带上参数就可以了，比如“ sass –watch test.scss:test.css –style nested”

2.6.1 具体编译的样式

我们的scss为

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li { display: inline-block; }

  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}

嵌套输出方式 nested

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

nav ul {
  margin: 0;
  padding: 0;
  list-style: none; }
nav li {
  display: inline-block; }
nav a {
  display: block;
  padding: 6px 12px;
  text-decoration: none; }

展开输出方式 expanded

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

nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
nav li {
  display: inline-block;
}
nav a {
  display: block;
  padding: 6px 12px;
  text-decoration: none;
}

紧凑输出方式 compact

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

nav ul { margin: 0; padding: 0; list-style: none; }
nav li { display: inline-block; }
nav a { display: block; padding: 6px 12px; text-decoration: none; }

压缩输出方式 compressed

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

nav ul{margin:0;padding:0;list-style:none}nav li{display:inline-block}nav a{display:block;padding:6px 12px;text-decoration:none}

3.基本用法

3.1 变量

Sass 的变量包括三个部分：

  1. 声明变量的符号“$”

  2. 变量名称

  3. 赋予变量的值

全局变量调用：

 $color: red;
 body {
     color: $color;
 }

编译为css

    body {
        color: red;
    }

局部变量调用

//定义全局变量
 $color: red;
 body {
     //定义局部变量
     $color: yellow;
     a {
         //调用局部变量
          color: $color;
     }
 }
 span {
     //调用全局变量
     color: $color;
 }

编译为css

 body a {
         color: yellow;
 }
 span {
     color: red;
 }

可以发现sass变量的调用和js很像。

镶嵌在字符串之中

如果变量需要镶嵌在字符串之中，就必须需要写在#{}之中。

$side : left;

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

3.2嵌套

3.2.1选择器嵌套

HTML

    <div class='box'>
      <div class="main">
          <span class="message"></span>
      </div>
    </div>

css写法

.box {
     width: 200px;
     height: 200px;
 }
 .box .main {
     background: red;
 }
 .box .main .message {
     color: yellow;
 }

sass写法

.box {
     width: 200px;
      height: 200px;
      .main {
          background: red;
          .message {
              color: yellow;
          }
      }
  }

3.2.2 属性嵌套

适用于CSS 有一些属性前缀相同，只是后缀不一样，
css

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

sass

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

3.2.3 伪类嵌套

借助&符号代表父元素

例如：
实现：a元素本为黄色，hover后变为红色

css 

a {
  color: yellow;
}
a:hover {
  color: red;
}

sass

a {
    color: yellow;
    &:hover {
      color: red;
    }
 }

3.3计算功能

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

body {
　　　　margin: (14px/2);
　　　　top: 50px + 100px;
　　　　right: $width * 10%;
　　}**重点内容**

3.4 注释

SASS共有两种注释风格。

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

单行注释 // comment，只保留在SASS源文件中，编译后被省略。

在/*后面加一个感叹号，表示这是”重要注释”。即使是压缩模式编译，也会保留这行注释，通常可以用于声明版权信息。

4.代码的复用

4.1 Mixin

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

@mixin box {
　　　wdith: 100px;
　　　height: 200px;
}

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

.main {
   @include box;
}

mixin可以传参数。

 @mixin box($width,$height) {
　　　wdith: $width;
　　　height: $height;
}

任然使用@include调用

.main {
   @include box(100px,200px);
}

mixin可以给参数默认值

 @mixin box($width: 100px) {
　　　wdith: $width;
　　　height: 200px;
}

任然使用@include调用，可以传参也可以不传

.main {
   //@include box(300px);
   @include box();
}

mixin对于@media这样的自适应

sass

@mixin clo-ms() {
  @media screen and (min-width: 768px) {
    width: 50%;
    float: left;
  }

  @media screen and (max-width: 600px){
    width: 100%;
  }
}
//调用
.main_box {
    @include clo-ms()
}

编译后的css（可以看到@media又到了最外面）

@media screen and (min-width: 768px) {
  /* line 76, ../sass/screen.scss */
  .main_box {
    width: 50%;
    float: left;
  }
}
@media screen and (max-width: 600px) {
  /* line 76, ../sass/screen.scss */
  .main_box {
    width: 100%;
  }
}

4.2继承

可以使用@extend实现继承

继承样式

sass

.b {
    color: yellow;
}
.c {
    @extend .b;
    border: 1px solid red;
}

编译后的css

.b {
    color: yellow;
}
.c {
    color: yellow;
    border: 1px solid red;
}

继承样式和层级

sass

.f{
    .k{
        color: red;
    }
}

.i {
    @extend .k;
}

编译后的css

.f .k, .f .i {
  color: red;
}

4.3 插入文件

@import命令，用来插入外部文件。

　　@import "path/filename.scss", "_mixin";

如果不写路径，只写文件名，会在同级目录下找,且可以不带后缀

与原生css中的@import的不同

这个@import和css原生的是不一样的，
原生的2大弊端：

  1. 必须放在css代码的最前面；
  2. 加入a引入b，当a下载下来之后读到b才会去下载b，造成了阻塞，影响性能

sass中@import ：

sass重新定义了import指令的功能,我们称之为control directives，sass编译时会将引入的文件合并,并且输出到css文件，import可以放在文件的任意位置，如果引入的文件是变量和mixin，则我们可以随意使用这些变量和mixin

如果你就是想用css原来的import的话,是用一定规则的(符合任意一条即可) ：

  1. @import的文件是以css结尾
  2. @mporti的是以http:/ /开头的字符串
  3. @import的是url()函数的时候
  4. @import的都带有meidia queries的时候（例如 tv）*/

5.高级用法

@mixin ber($num) {
  //if判断
  @if type-of($num) != number {
    //报错,  #{}可以取到变量
    @error "$num必须是number,你输入的是 #{$num}";
  }

//unitless()检查带不带单位，不带单位为false      取反用not
  @if not unitless($num) {
    // unit()获取单位
    @if unit($num) != '%'{
       @error '$num单位必须是%，你输入的是 #{$num}';
    }
  } @else {
    //警告
    @warn '#{$num} 应该带单位，你输入的是 #{$num}';
    //加上%单位
    $num: (percentage($num)/100);
  }
  width: $num;
}

猜你喜欢

转载自blog.csdn.net/haochangdi123/article/details/80246754
今日推荐
《美国对全球网络空间安全与发展的威胁和破坏》报告发布
火速冲上 GitHub 热榜 —— 开源编程语言、框架哪有这么可爱？
北京人形机器人创新中心发布全球首个纯电驱拟人奔跑的全尺寸人形机器人“天工”
LFOSSA 源来如此公开课 | 掌握云原生未来：CNCF 认证全面攻略与备考秘籍
周排行
让自己的头脑极度开放
CentOS 6.5(x64) 和Redhat6.5操作系误删libc
高可用注册中心
【日记】12.28/【题解】AtCoder AGC041
XML（5）_XML 约束_DTD
Java集合Map（四）
树梅派安装桌面环境教程
pipenv 的 使用和安装
小程序白屏问题和内存研究
C语言简单选择排序
每日归档
更多
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)
2024-04-28(0)
2024-04-27(56)
2024-04-26(39)
2024-04-25(22)
2024-04-24(36)
2024-04-23(26)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022