SASS 入门

SASS的介绍

SASS 官网：http://sass-lang.com/ 英文版
https://www.sass.hk/ 中文版
https://www.w3cplus.com/sassguide/ SASS入门 教程

SASS 是基于 Ruby 的，LESS 是基于 Javascript 的，在大的文件上的编译 SASS 是稍微有一点点的优势的，在整体上 SASS 和 LESS 都是 CSS 预处理器，SASS 可以像函数一样编程

SASS的安装

参考网址：https://www.sass.hk/install/

image.png

image.png

image.png

image.png

image.png

• 安装之后重新打开命令行终端输入下面的命令，测试是否安装成功

ruby -v

image.png

image.png

参考网址： https://ruby.taobao.org/

image.png

$ gem sources --add http://gems.ruby-china.org/ --remove https://rubygems.org/
$ gem sources -l
*** CURRENT SOURCES ***

https://gems.ruby-china.org
# 请确保只有 gems.ruby-china.org

//安装 sass 
gem install sass

image.png

温馨提示：

我第一次安装的 ruby 是最新版的出现了一些 bug 导致无法 install 装包，后来我下载了个 2.3 版本的，之后又在换淘宝镜像的时候报了错，然后我把 https 改为了 http 就可以了，下面是错误的截图：

image.png

解决方法：将当前安装的 2.5 新版本的 ruby 的在 C 盘安装的文件夹删掉，之后再去下载 2.3 版本的

image.png

解决方法修改 https 为 http

SASS的应用

参考链接：https://www.w3cplus.com/sassguide/ Sass 入门教程

image.png

Example

• 在桌面新建一个sasstest 文件夹，将其拖拽至 sublime 中

image.png

变量

image.png

• 在文件夹中新增一个 index.scss 文件，编辑 index.scss 文件

$fontStack : Helvetica,
sans-serif;
$primaryColor: #333;

body {
    font-family: $fontStack;
    color: $primaryColor;
}

h1 {
    color: $primaryColor;
}

• 在命令行中编译 .scss 文件

cd Desktop\sasstest\
//默认会将编译后的源码输出到控制台上
sass index.scss

image.png

• 编译后会自动生成一个文件夹，这里面的文件存的是编译后的一些缓存，是以 .scssc 为后缀名的

image.png

• 继续在命令行中输入命令

//编译  index.scss 文件并生成一个新的 index.css 文件，这个跟LESS 有点不一样不需要加  < 
sass index.scss index.css

image.png

• 编译后的 index.css 文件，最后一行的意思是：可以通过URL 后面的值找到文件生成的一些源地址

image.png

• 自动生成的一个 map 文件，这里面就是一些 index.css 生成时的一些基本信息

image.png

嵌套

image.png

• 在项目中再新建一个 index1.scss 文件，编辑 index1.scss 文件，上面两行是注释，写法和 js 是一样的

//这个是我们的第二个 sCss 的测试
//-----------------------------------
nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li { display: inline-block; }

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

• 在命令行中编译 index1.scss 文件

sass index1.scss index1.css

image.png

image.png

image.png

• 插曲：在上面的操作之间我修改了 index1.scss 文件中的第一行的注释，写了中文你，之后在命令行中编译时报了一个错误，这个证明是不识别的，需要自行的再去设置编码格式

  

  image.png

  
  

  

  image.png

导入

image.png

• 在项目中新建一个 _reset.scss 文件，编辑 _reset.scss 文件

html,
body,
ul,
ol {
   margin: 0;
  padding: 0;
}

• 接着编辑 index.scss 文件，在顶部导入上面的 _reset.scss 文件

@import 'reset';

image.png

• 在命令行中编译 index.scss 文件

sass index.scss index_new.css

image.png

• 在项目中查看 index_new.css 文件，会发现他把两个 sacc 文件的代码编译并且合并了

image.png

mixin

image.png

• 在项目中新建一个 mixin.scss 文件，编辑 mixin.scss 文件

@mixin box-sizing ($sizing) {
    -webkit-box-sizing:$sizing;     
       -moz-box-sizing:$sizing;
            box-sizing:$sizing;
}
.box-border{
    border:1px solid #ccc;
    @include box-sizing(border-box);
}

• 在命令行中编译 mixin.scss 文件

sass mixin.scss mixin.css

image.png

image.png

扩展/继承

image.png

• 在项目中新建一个 extend.scss 文件，编辑 extend.scss 文件

.message {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}

.success {
  @extend .message;
  border-color: green;
}

.error {
  @extend .message;
  border-color: red;
}

.warning {
  @extend .message;
  border-color: yellow;
}

• 在命令行中编译 extend.scss 文件

sass extend.scss extend.css

image.png

image.png

运算

image.png

• 在项目中新建一个 calc.scss 文件，编辑 calc.scss 文件

.container { width: 100%; }

article[role="main"] {
  float: left;
  width: 600px / 960px * 100%;
}

aside[role="complimentary"] {
  float: right;
  width: 300px / 960px * 100%;
}

• 在命令行中编译 calc.scss 文件

sass calc.scss calc.css

image.png

image.png

颜色

image.png

Compass（样式框架）_百度百科
Compass由SASS的核心团队成员Chris Eppstein创建，是一个非常丰富的样式框架，包括大量定义好的mixin，函数，以及对SASS的扩展。

image.png

• 在项目中新建一个 color.scss 文件，编辑 color.scss 文件

$linkColor: #08c;
a {
    text-decoration:none;
    color:$linkColor;
    &:hover{
      color:darken($linkColor,10%);
    }
}

• 在命令行中编译 color.scss 文件

sass color.scss color.css

image.png

image.png

• 在项目中新建一个 index.html 文件，便于查看颜色查看效果，编辑 index.html

百度一下

• 在浏览器中打开这个 index.html 页面

image.png