Skip to content

Latest commit

 

History

History
119 lines (94 loc) · 6.19 KB

8.md

File metadata and controls

119 lines (94 loc) · 6.19 KB
Raw

Sass 环境调试

CSS的预编译工具有很多 :Less , Sass , stylus , postcss 等等 。CSS预处理器用一种专门的编程语言，进行Web页面样式设计，然后再编译成正常的CSS文件，以供项目使用。

为CSS增加一些编程的特性，无需考虑浏览器的兼容性问题，例如你可以在CSS中使用变量、简单的逻辑程序、函数等等在编程语言中的一些基本特性， 可以让你的CSS更加简洁、适应性更强、可读性更佳，更易于代码的维护等诸多好处。

sass 是什么 ？

  • Sass (Syntactically Awesome StyleSheets) is the most mature, stable, and powerful professional grade CSS extension language in the world.(Sass是世界上最成熟、最稳定、最强大的专业级CSS扩展语言！)

  • Sass可以让你的CSS更加简洁、适应性更强、可读性更佳，更易于代码的维护

为什么使用 Sass ?

  • 完全兼容所有版本的CSS
  • 特性丰富
  • 成熟
  • 行业认可
  • 社区庞大
  • 拥有较多的框架

Sass 的环境配置

环境配置： 有两种安装方式，一个是使用应用程序，二是使用命令行，我们只说下windows下的命令行的演示。

安装

  • 在windows安装，需要安装ruby环境。mac预装了ruby环境。

  • 注意安装完成后一定要添加到path中，因为我们要使用ruby的gem命令来安装Sass :

    • $gem install sass
    • 安装需要一段时间 , 当出现类似下面提示的时候，就安装好了 ：
        Successfully installed sass-3.4.22 
    Parsing documentation for sass-3.4.22 
    Done installing documentation for sass after 13 seconds 
    1 gem installed

调试

  • 编译

    1. sass文件有两种格式， 一种是 scss后缀的， 一种是sass后缀的。这个以后再来看。推荐使用的是scss格式的。
    2. 在我们的项目中，我们编写 scss文件，通过命令来编译成css ,如下： 格式为： sass 原scss文件:目标文件css 示例为：sass hello.scss:hi.css
    3. 这样就把scss文件编译成了css文件。

  • 编译时控制不同格式的输出

    1. 有多种不同的格式： nested (嵌套 这个是默认的，看着不舒服) ； expanded (展开 看着最顺眼) ； compact (紧凑) ； comparessd (压缩 压缩成一行)

    2. 我们通过下面的命令来选择输出不同的格式 ： sass hello.scss:hi.css --style expanded sass hello.scss:hi.css --style compact sass hello.scss:hi.css --style compressed

    3. 或者可以使用nodejs环境来编译 安装node-sass包 ： $npm install -g node-sass 检测包有没有安装好： $node-sass -v 编译文件: $node-sass hello.scss>hi.css 这里控制下编译时候格式的输出 $node-sass hello.scss>hi.css --output-style expanded 使用这条命令时候，我们编译的路径，不能有中文名，否则会报错，之后只要我们更改scss文件，保存后，就会自动修改编译后的css文件。

    4. 自动编译
      我们想只要scss 文件已改动，那么对应的生成的css也会立即更新,我们需要对文件或者是项目进行监视。 文件的监视 ，对当前文件 $sass --watch hello.scss:hi.css 整个文件夹的监视 $sass --watch ./:./ 当然如果我们想要同时控制压缩格式，那么通过下面的形式 ：$sass --watch hello.scss:hi.css --style expanded 注意事项： 编译前要注意，路径中不能有中文，而且注释中也不要有中文。ruby环境sass编译中文出现Syntax error: Invalid GBKcharacter错误解决方法 : （1）如果用的是koala可视化编译工具，那么找到安装目录里面sass-3.3.7模块下面的engine.rb文件，例如下面路径：C:\Program Files (x86)\Koala\rubygems\gems\sass-3.3.7\lib\sass 在这个文件里面engine.rb，添加一行代码 : Encoding.default_external = Encoding.find('utf-8') 放在所有的require XXXX 之后即可。 （2）如果是命令行工具也同样的解决方式：找到ruby的安装目录，里面也有sass模块，如这个路径 ：C:\Ruby\lib\ruby\gems\1.9.1\gems\sass-3.3.14\lib\sass 在这个文件里面engine.rb，添加一行代码 Encoding.default_external = Encoding.find('utf-8') 放在所有的require XXXX 之后即可。

    5. 也可以使用sublime 来自动编译 在sublime 中 通过 ctrl+shift+p 输入 pcl ，查找下列插件 :Sass ， SASS build ， SASS Snippets ，SublimeOnSaveBuild(自动保存编译插件，保存后会自动编译)

    6. 或者使用webstorm 来自动编译 打开项目到webstrom ，找到scss文件，然后打开，一般都会提示 filewatcher is available ，我们add watcher ，然后按照默认，点击ok就可以了。

      在webstrom 里面如果编译后按照默认的nested形式来展现css的，如果我们 需要设置，那么我们在settings / Tools / File Watchers 来修改它。 前提是当前项目中存在 scss 或者sass后缀名的文件。 点击编辑图标后，找到 Watcher Settings ，在里面的Arguments 的最后添加一段内容 –style expanded 7）Sass 中的repl环境 通过命令 sass -i 我们可以测试sass中的一些函数，和nodejs里的repl， 以及浏览器中的repl都类似。

扩展知识

sass中有两种格式 : 一种是 sass后缀的文件，一种是scss后缀的文件。我们推荐使用scss后缀的文件。

两者的区别和联系为：都使用严格的缩进方式，但是 sass 中没有花括号({}),没有分号(;) ， 而 scss 中有花括号和分号，使用起来方便。

简单举个例子区分：在以sass为后缀的文件中是这样的：

$border:1px
.box
    border:$border
    color:red

在以scss为后缀的文件中是这样的：

$border:1px;
.box{
    border:$border;
    color:red;
}

所以我们更推荐使用scss的文件格式。