Sass 快速入门

官方资源

Sass 官网:https://sass-lang.com/

Sass 中文网:https://www.sass.hk/guide/

Ruby 官网:http://www.ruby-lang.org

compass:http://compass-style.org

compass 实例:http://compass-style.org/examples/

compass 模块:http://compass-style.org/examples/compass/

开发环境

ruby

编译方式

1、Compass(CSS开源框架)

2、Easy Sass (VSCode 插件)

3、Koala (可视化编译工具)

Compass(推荐)

一、安装

安装Ruby,官网下载压缩包,解压到D盘,添加环境变量path:D:\software\Ruby2.5.3\bin

安装 sass 和 compass,注:gem 是 Ruby 内部命令

gem install sassgem install compass//以下命令备用gem update sass//升级//如果安装失败,试着替换源,不要用taobao的,用ruby-china这个gem sources --removehttps://rubygems.org/gem sources --addhttp://gems.ruby-china.org/

二、创建项目

使用compass创建项目

compass create

三、编辑项目

新建 index.html,引入编译后的样式 index.css

在 sass 的 index.scss 里进行编辑

四、编译css

compasscompilecompass watch//也可开启实时编译

提示:

如果想修改编译后的文件名,须把 config.rb 里的变量 css_dir 改成一致,例如 css_dir = "css"

设置不带注释编译 line_comments = false

VSCode插件

Easy Sass : 自动编译 SASS/SCSS 文件到 .css 和 .min.css 。还可以快速编译项目中的所有 SCSS/SASS 文件。默认编译到当前目录下,可修改配置:

"easysass.targetDir":"./css"

可视化编译工具:Koala

官网:http://koala-app.com/

github:https://github.com/oklai/koala/

优缺点:不用装环境也能编译, 但不能编译中文,可通过修改文件D:\Koala\rubygems\gems\sass-3.4.9\lib\sass\engine.rb解决, 在require最下面加入以下代码.

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

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • [toc] 前言 本文所有的演示都是基于Win10操作系统。 关于Sass 1.定义 Sass的学名叫“CSS预处...
    崔小叨阅读 18,347评论 0 78
  • 什么是CSS预处理器 CSS 预处理器定义了一种新的语言,其基本思想是,用一种专门的编程语言,为 CSS 增加了一...
    青青玉立阅读 1,103评论 0 0
  • 一、Sass安装(windows版) 1.在 Windows 平台下安装 Ruby 需要先有 Ruby 安装包,可...
    July_EF阅读 746评论 0 0
  • 一、Sass安装(windows版): 1.Ruby 的官网(http://rubyinstaller.org/d...
    Mx勇阅读 8,852评论 0 3
  • PS: 本文操作均在Windows下 Sass Sass 是采用 Ruby 语言编写的一款 CSS 预处理语言,它...
    假行僧396741阅读 1,684评论 1 3