sass编译

命令行编译

单文件转换命令

sass style.scss style.css

单文件监听命令

sass --watch style.scss:style.css

文件夹监听命令

sass --watch sassFileDirectory:cssFileDirectory

css文件转成sass/scss文件(在线转换工具css2sass

sass-convert style.css style.sass
sass-convert style.css style.scss

命令行其他配置选项

运行命令行帮助文档,可以获得所有的配置选项

sass -h

我们一般常用的有--style--sourcemap--debug-info等。

sass --watch style.scss:style.css --style compact
sass --watch style.scss:style.css --sourcemap
sass --watch style.scss:style.css --style expanded --sourcemap
sass --watch style.scss:style.css --debug-info
  • --style表示解析后的css是什么格式,有四种取值分别为:nestedexpandedcompactcompressed
  • --sourcemap表示开启sourcemap调试。开启sourcemap调试后,会生成一个后缀名为.css.map文件。
  • --debug-info表示开启debug信息,升级到3.3.0之后因为sourcemap更高级,这个debug-info就不太用了。

四种style生成后的css

// nested
#main {
color: #fff;
background-color: #000; }
#main p {
width: 10em; } .huge {
font-size: 10em;
font-weight: bold;
text-decoration: underline; } // expanded
#main {
color: #fff;
background-color: #000;
}
#main p {
width: 10em;
} .huge {
font-size: 10em;
font-weight: bold;
text-decoration: underline;
} // compact
#main { color: #fff; background-color: #000; }
#main p { width: 10em; } .huge { font-size: 10em; font-weight: bold; text-decoration: underline; } // compressed
#main{color:#fff;background-color:#000}#main p{width:10em}.huge{font-size:10em;font-weight:bold;text-decoration:underline}

gui编译

这里推荐koala,它是一个优秀的免费编译器,界面清晰简洁,操作起来也非常简单,详细的大家可以移歩到:Less/Sass编译工具,koala使用指南,简单操作如下图:

编辑器编译

某些高上大的编辑器本身就内置了sass的编译,如webstorm等,而对于sublime text也有相应的插件可以使用:编译保存即编译。如果不清楚你的编辑器是否拥有自动编译的功能,可谷歌百度。

在线编译

sassmeister提供了在线编译。

文章内容源于网络

sass编译的更多相关文章

  1. Sublime插件支持Sass编译和Babel解析ES6 & .sublime-build文件初探

    用Sublime Text蛮久了,配置配来配去的,每次换电脑都得重头再配过,奈何人老了脑子不中用了,得好好整理一些,下次换电脑就有得参考了.. 同事说,他的WebStorm简直太方便,自身集成了很多方 ...

  2. Sass学习之路(3)——Sass编译

    Sass的编译也是在我们使用Sass的时候必须要经过的一个步骤,因为".sass"和".scss"文件并不能直接使用<link>标签引用,最终其实还 ...

  3. ruby环境sass编译中文出现Syntax error: Invalid GBK character错误解决方法

    sass文件编译时候使用ruby环境,无论是界面化的koala工具还是命令行模式的都无法通过,真是令人烦恼. 容易出现中文注释时候无法编译通过,或者出现乱码,找了几天的解决方法终于解决了. 这个问题的 ...

  4. Sass 编译的几种方法

    常常有人会问,使用 Sass 进行开发,那么是不是直接通过“<link>”引用“.scss”或“.sass”文件呢? 那么这里告诉大家,在项目中还是引用“.css”文件,Sass 只不过是 ...

  5. 在sublime text3中安装sass编译scss文件

    一 搭建环境 首先安装ruby环境,不然会编译失败,在这里下载ruby ,安装的时候选择第二项 在cmd中输入gem -v 显示版本号说明ruby安装成功 待ruby安装成功后,在cmd中输入 gem ...

  6. 怎么使用Less/Sass编译工具koala

    怎么使用Less/Sass编译工具koala 如何使用Less/Sass编译工具koala 一.SASS调试插件的方法 如需调试功能,请在编译输出的时候输出debug信息,那样解析的css文件中就会包 ...

  7. Sublime插件支持Sass编译和Babel解析ES6 & .sublime-build文件初探(转载自imwtr)

    原文请看:http://www.cnblogs.com/imwtr/p/6010550.html   用Sublime Text蛮久了,配置配来配去的,每次换电脑都得重头再配过,奈何人老了脑子不中用了 ...

  8. sublime添加sass编译

    首先安装Ruby环境sass是基于ruby的产物,因此在安装sass前需要先安装ruby,如果用命令方式编译Sass也是必须安装ruby的.命令行编译sass见!下载Ruby windows 安装包: ...

  9. sass编译命令

    sass编译一个文件的方式 sass xx.scss:xx.css 这种方式只能编译一次,要是想一直监控编译,只要有保存更改就会立即编译,那么就需要下面这条命令了 sass --watch xx.sc ...

随机推荐

  1. linux基本常用命令列举

    上回装完虚拟机中的linux系统了,进入找到terminal,打开命令行界面 pwd:展示目前为止绝对路径 cd cd~:跳转到/home/yy的位置 cd-:跳转到上一步的位置 cd path(绝对 ...

  2. Two Sum (c#)

    Given an array of integers, find two numbers such that they add up to a specific target number. The ...

  3. sqlserver 存储过程分页管理

    -- =============================================-- Author:  <Author:刘畅>-- Create date: <Cre ...

  4. 网易云课堂JS笔记

    JS能做什么?? ----网易官网:选项卡----京东: Hbuilder编辑器介绍 JavaScript简介 ECMAScript:javaScript组成语法和基本对象 DOM:文档对象模型,描述 ...

  5. (翻译)Emacs Hooks

    Table of Contents 1. 51.2.2 Hooks 51.2.2 Hooks Hooks(钩子或挂钩,为了保持文章的纯正性,这种专有名词不做翻译,后续以hooks为主),是定制化Ema ...

  6. AppCode 2016.2.3 发布,支持 Swift3 的特性

    AppCode 2016.2.3 (build 162.2380.5)发布了,AppCode 是一个全新的 Objective-C.Swift 的集成开发环境,用于帮助开发 Mac.iPhone 和 ...

  7. Thinkphp 带查询条件数据分页

    //查询条件中如果有中文 $keyword= urldecode(I("request.keyword")); if ($keyword!=""){ $Mode ...

  8. JAVA抽象类与接口的详细解读与示例

    接口存在的原因: JAVA是单继承的,不支持多继承,但是有了接口,JAVA可以实现多个接口: 一个类要是实现某一个接口就必须实现接口内声明的所有方法(强迫执行,即便是空方法,也要实现): 接口特点: ...

  9. 利用python实现爬虫爬取某招聘网站,北京地区岗位名称包含某关键字的所有岗位平均月薪

    #通过输入的关键字,爬取北京地区某岗位的平均月薪 # -*- coding: utf-8 -*- import re import requests import time import lxml.h ...

  10. 用css实现条纹背景

    我先额外的说一下怎么用CSS绘制三角形: 绘制三角形是把边框加粗,将元素的宽高都设为0,让其余的边框颜色透明,下面我们来看实现的代码: 先把边框的颜色设置成不同颜色: #div{ border-col ...