-
Sass不同樣式風(fēng)格的輸出方法： 1、nested ：嵌套輸出風(fēng)格 2、expanded ：展開(kāi)輸出方式 3、compact ：緊湊輸出方式 4、compressed ：壓縮輸出方式查看全部
-
常見(jiàn)編譯錯(cuò)誤： 1、字符編譯錯(cuò)誤：Sass不支持GBK，創(chuàng)建Sass文件時(shí)設(shè)置文件編碼為utf-8 2、中文字符錯(cuò)誤：項(xiàng)目文件和文件目錄名不要使用中文字符查看全部
-
自動(dòng)化編譯： 1、Grunt 配置 Sass 編譯的示例代碼 module.exports = function(grunt) { grunt.initConfig({ pkg: grunt.file.readJSON('package.json'), sass: { dist: { files: { 'style/style.css' : 'sass/style.scss' } } }, watch: { css: { files: '**/*.scss', tasks: ['sass'] } } }); grunt.loadNpmTasks('grunt-contrib-sass'); grunt.loadNpmTasks('grunt-contrib-watch'); grunt.registerTask('default',['watch']); } 想了解 Grunt 同學(xué)請(qǐng)單擊這里學(xué)習(xí)《Grunt-beginner前端自動(dòng)化工具》。 2、Gulp 配置 Sass 編譯的示例代碼 var gulp = require('gulp'); var sass = require('gulp-sass'); gulp.task('sass', function () { gulp.src('./scss/*.scss') .pipe(sass()) .pipe(gulp.dest('./css')); }); gulp.task('watch', function() { gulp.watch('scss/*.scss', ['sass']); }); gulp.task('default', ['sass','watch']);查看全部
-
推薦的GUI編譯工具： 1、Koala 2、CodeKit查看全部
-
命令編譯 1、單文件編譯命令： sass <path/to/>style.scss:<path/to/>style.css 2、多文件編譯命令: sass <sass/folder/>:<css/folder/> 3、開(kāi)啟watch功能，檢測(cè)代碼變化，實(shí)現(xiàn)實(shí)時(shí)編譯 sass --watch <path/to/>style.scss:<path/to/>style.css查看全部
-
Sass編譯方法： 1、命令編譯 2、GUI工具編譯 3、自動(dòng)化編譯查看全部
-
注意：“.sass”只能使用 Sass 老語(yǔ)法規(guī)則（縮進(jìn)規(guī)則），“.scss”使用的是 Sass 的新語(yǔ)法規(guī)則，也就是 SCSS 語(yǔ)法規(guī)則（類似 CSS 語(yǔ)法格式）。查看全部
-
1、Sass 語(yǔ)法格式 這里說(shuō)的 Sass 語(yǔ)法是 Sass 的最初語(yǔ)法格式，他是通過(guò) tab 鍵控制縮進(jìn)的一種語(yǔ)法規(guī)則，而且這種縮進(jìn)要求非常嚴(yán)格。另外其不帶有任何的分號(hào)和大括號(hào)。常常把這種格式稱為 Sass 老版本，其文件名以“.sass”為擴(kuò)展名。 使用 SCSS 語(yǔ)法格式將按下面這樣來(lái)書(shū)寫： $font-stack: Helvetica, sans-serif; $primary-color: #333; body { font: 100% $font-stack; color: $primary-color; } 2、SCSS語(yǔ)法格式 SCSS 是 Sass 的新語(yǔ)法格式，從外形上來(lái)判斷他和 CSS 長(zhǎng)得幾乎是一模一樣，代碼都包裹在一對(duì)大括號(hào)里，并且末尾結(jié)束處都有一個(gè)分號(hào)。其文件名格式常常以“.scss”為擴(kuò)展名。 使用 SCSS 語(yǔ)法格式將按下面這樣來(lái)書(shū)寫： $font-stack: Helvetica, sans-serif; $primary-color: #333; body { font: 100% $font-stack; color: $primary-color; }查看全部
-
卸載/刪除Sass命令： gem uninstall sass查看全部
-
檢查Sass: sass -v 更新Sass: gem update sass查看全部
-
Sass 和 CSS 寫法有差別： Sass 和 CSS 寫法的確存在一定的差異，由于 Sass 是基于 Ruby 寫出來(lái)，所以其延續(xù)了 Ruby 的書(shū)寫規(guī)范。在書(shū)寫 Sass 時(shí)不帶有大括號(hào)和分號(hào)，其主要是依靠嚴(yán)格的縮進(jìn)方式來(lái)控制的。如： Sass寫法： body color: #fff background: #f36 而在 CSS 我們是這樣書(shū)寫： body{ color:#fff; background:#f36; } SCSS 和 CSS 寫法無(wú)差別： SCSS 和 CSS 寫法無(wú)差別，這也是 Sass 后來(lái)越來(lái)越受大眾喜歡原因之一。簡(jiǎn)單點(diǎn)說(shuō)，把你現(xiàn)有的“.css”文件直接修改成“.scss”即可使用。查看全部
-
Sass 開(kāi)發(fā)之后，要讓 Web 頁(yè)面能調(diào)用 Sass 寫好的東西，就得有這么一個(gè)過(guò)程，這個(gè)過(guò)程就稱之為 Sass 編譯過(guò)程。Sass 的編譯有多種方法： 命令編譯 GUI工具編譯 自動(dòng)化編譯查看全部
-
gem uninstall sass查看全部
-
gem update sass查看全部
-
刪除/卸載Sass，輸入命令【gem uninstall sass】查看全部
舉報(bào)
0/150
提交
取消