http://mahua.jser.me/
https://www.sass.hk/
sudo apt install ruby
ruby -v
sudo gem install sass
sass -v
sudo apt install ruby-compass
compass -v
gem update sass
sass -v
sass -h
概述:sass编译有很多种方式,如命令行编译模式、sublime插件SASS-Build、编译软件koala、前端自动化软件codekit、Grunt打造前端自动化工作流grunt-sass、Gulp打造前端自动化工作流gulp-ruby-sass等.
sass input.scss output.css
sass --watch input.scss:output.css
sudo sass --watch test.scss:test.css
sass --watch app/sass:public/stylesheets
sudo sass --watch sass/css:static/css --style expanded
|-sass
|-css
|-news
|-news.scss
|-product
|-product.scss
|-static
|-css
注:sudo sass --watch时 -> static/css下的目录会自动生成
概述:命令行编译sass有配置选项,如编译过后css排版、生成调试map、开启debug信息等,可通过使用命令sass -v查看详细。我们一般常用两种--style``--sourcemap。
sass --watch input.scss:output.css --style compact
sass --watch input.scss:output.css --sourcemap
sass --watch input.scss:output.css --style expanded --sourcemap
sass --watch input.scss:output.css --debug-info
--style表示解析后的css是什么排版格式.
sass内置有四种编译格式:nested``expanded``compact``compressed.
--sourcemap表示开启sourcemap调试。开启sourcemap调试后,会生成一个后缀名为.css.map文件.
未编译样式
.box {
width: 300px;
height: 400px;
&-title {
height: 30px;
line-height: 30px;
}
}
命令行内容
sass style.scss:style.css --style nested
编译过后样式
.box {
width: 300px;
height: 400px; }
.box-title {
height: 30px;
line-height: 30px; }
命令行内容
sass style.scss:style.css --style expanded
编译过后样式
.box {
width: 300px;
height: 400px;
}
.box-title {
height: 30px;
line-height: 30px;
}
命令行内容
sass style.scss:style.css --style compact
编译过后样式
.box { width: 300px; height: 400px; }
.box-title { height: 30px; line-height: 30px; }
命令行内容
sass style.scss:style.css --style compressed
编译过后样式
.box{width:300px;height:400px}.box-title{height:30px;line-height:30px}
|-sass
|-main.scss // 全局样式.
|-_reboot.scss // 重置浏览器默认样式.
|-components // 【组件】
|-_components.scss // 组合所有组件的核心文件.
|-_alert.scss // 提示框组件.
|-_dialog.scss // 弹出窗口组件.
|-mixins // 【混合器】
|-_mixins.scss // 组合所有混合气的核心文件.
|-_box-shadow.scss // 阴影混合器.
|-_box-sizing.scss // 盒模型混合器.
|-functions // 【自定义函数】
|-_functions.scss // 组合所有自定义函数的核心文件.
|-_global.scss // 全局自定义函数.
|-variables // 【变量】
|-_variables.scss // 全局变量定义.
|-themes // 【主题】
|-_default.scss // 默认主题.
|-modules // 具体模块.
|-_core.scss // 模块核心(import变量、混合器、自定义函数……).
|-domain // 【域名模块】
|-domain.scss // 域名模块
|-css
|-main.css // sass生成.
|-bootstrap.min.css // 第三方css框架.
|-modules // 模块.
|-domain
|-domain.css
|-vendor // 第三方插件.
|-date
|-date.css