纯 html 文件中怎么使用 sass

sass 是一种流行的 CSS 预处理器,它能够让开发者使用嵌套语法和变量,以及一些其他的便利功能,来更加高效地编写 CSS 样式表。

没有使用 npm 安装 sass,在平时的纯 html 页面中,要怎么才能使用 sass

安装 Ruby

http://www.ruby-lang.org/zh_cn/downloads/

安装 sass

cmd 命令行输入下面的命令

gem install sass

使用

文件夹名称不能是中文,否则会编译失败

  • 单文件编译
sass <要编译的Sass文件路径>/style.scss:<要输出CSS文件路径>/style.css
  • 多文件编译
    sass sass/\:css/(表示“sass”文件夹中所有的”.scss”文件编译成”.css”文件,并且将这些css文件放到“css”文件夹中)

  • 自动监测(主要使用)
    sass --watch<要编译的Sass文件路径>/style.scss:<要输出CSS文件路径>/style.css(.scss文件每次修改按ctrl+s保存都会实时的反映到输出的.css文件中)

:expanded 普通样式
:compact 一个样式一行
:compressed 所有样式一行

先打开命令行工具,进入到具体的文件夹,然后再执行使用命令。

例子:
我有一个项目放在了 E 盘,名称叫 sass-project,里面有一个 sasscss 文件夹。
打开 cmd,E:进入到 E 盘,然后使用 cd 进入到 sass-project文件夹,接下来执行下面的命令就行

sass --watch sass:css --style compact
ctrl+c 停止

image

基本用法

变量

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

计算功能

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

嵌套

  div {
    h1 {
      color:red;
    }
  }
  border-color属性
  p { 
    border: {
      color: red;
    }
  }
  a:hover
  a {
    &:hover { color: #ffb3ff; }
  }

代码的重用

继承

.class1 {
    border: 1px solid #ddd;
  }
  .class2 {
    @extend .class1;
    font-size:120%;
  }

Mixin (重用代码块) 可以指定参数和缺省值

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

eg: 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); }

颜色函数

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

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

插入文件

@import "path/filename.scss";
@import "foo.css";

支持中文注释方法

  • 在 scss 文件头加上 @charset "utf-8";
  • 查看出错的 css 文件
Backtrace:
sass/shop.scss:4
C:/Ruby26/lib/ruby/gems/2.6.0/gems/sass-3.7.3/lib/sass/util.rb:1090:in `rescue in block in find_encoding_error'
C:/Ruby26/lib/ruby/gems/2.6.0/gems/sass-3.7.3/lib/sass/util.rb:1087:in `block in find_encoding_error'
C:/Ruby26/lib/ruby/gems/2.6.0/gems/sass-3.7.3/lib/sass/util.rb:1086:in `each'
C:/Ruby26/lib/ruby/gems/2.6.0/gems/sass-3.7.3/lib/sass/util.rb:1086:in `each_with_index'
C:/Ruby26/lib/ruby/gems/2.6.0/gems/sass-3.7.3/lib/sass/util.rb:1086:in `find_encoding_error'
C:/Ruby26/lib/ruby/gems/2.6.0/gems/sass-3.7.3/lib/sass/util.rb:820:in `rescue in check_sass_encoding'

得到路径 C:/Ruby26/lib/ruby/gems/2.6.0/gems/sass-3.7.3/lib/sass

里面有一个文件engine.rb打开

require 'sass/scss'
require 'sass/stack'
require 'sass/error'
require 'sass/importers'
require 'sass/shared'
require 'sass/media'
require 'sass/supports'

我们在一连串的 require 后面加上代码

Encoding.default_external = Encoding.find('utf-8')

最后再重启 sass 一下就好了

更详细的使用可以参考:http://www.ruanyifeng.com/blog/2012/06/sass.html