Sass の概要、インストール環境、Sass 構文形式とコンパイルとデバッグ_html/css_WEB-ITnose

CSS プリプロセッサとは何ですか?

定義: CSS プリプロセッサは、新しい言語を定義します。基本的な考え方は、特殊なプログラミング言語を使用して CSS にいくつかのプログラミング機能を追加し、CSS をターゲットとして使用してファイルを生成し、作成者が必要なのは次のことだけです。コーディング作業にはこの言語を使用してください。

CSS で変数、単純なロジック プログラム、関数、プログラミング言語のその他の基本機能を使用すると、CSS がより簡潔になり、適応性が高まり、読みやすくなり、コードの保守が容易になるなど、多くの利点があります。

CSS プリプロセッサ言語 (例:
Sass (SCSS)
LESS
Stylus
Turbine
Swithch CSS
CSS Cacheer
DT CSS

これまでのところ、多くの優れた CSS プリプロセッサ言語のジャンル Sass レス と Stylus Best

Sass とは何ですか?
Sass は CSS よりも上位のメタ言語で、ファイルのスタイルを明確かつ構造的に記述することができ、通常の CSS よりも強力な機能を備えています。
Sass は、保守しやすく管理しやすいスタイルシートを作成するためのさまざまな機能を提供しながら、よりクリーンでエレガントな構文を提供します。

Sass と SCSS の違いは何ですか?
Sass と SCSS は実際には同じものです。通常、この 2 つの違いは次のとおりです。
1. Sass には拡張子「.sass」が付いています。拡張子として「.scss」接尾辞を使用します
2. Sass は、中括弧 ({}) とセミコロン (;) を使用しない、厳密なインデント文法規則で記述されており、SCSS の構文記述は非常に似ています。 CSS 構文の記述に。
Sass構文

1 $font-stack: Helvetica, sans-serif //定义变量2 $primary-color: #333 //定义变量3 body4 　　font: 100% $font-stack5 　　color: $primary-color

SCSS構文

1 $font-stack: Helvetica, sans-serif;2 $primary-color: #333;3 body {4  font: 100% $font-stack;5  color: $primary-color;6 }

コンパイルされたCSS

1 body {2  font: 100% Helvetica, sans-serif;3  color: #333;4 }

Sass/SCSS と純粋な CSS の記述には大きな違いがありますか?
Sass と CSS の記述方法には違いがあります:
Sass と CSS の記述方法には確かにいくつかの違いがあります。Sass は Ruby に基づいて記述されているため、Ruby の記述仕様を継承しています。 Sass を記述する場合、中括弧やセミコロンは使用されず、主に厳密なインデントによって制御されます。例:
Sass の書き方:

body    color: #fff    background: #f36

そして CSS では次のように書きます:

body{ color:#fff; background:#f36;}

SCSS と CSS の書き方に違いはありません:
SCSS と CSS の記述方法 これが、Sass が一般に普及する理由の 1 つです。簡単に言えば、既存の「.css」ファイルを直接「.scss」に変更するだけで使用できるようになります。

Sass インストール (Windows バージョン)

Windows プラットフォームで Ruby をインストールするには、まず Ruby の公式 Web サイト (http://rubyinstaller.org/downloads) から対応する Ruby をダウンロードします。バージョン。

Ruby インストール ファイルをダウンロードした後、アプリケーション ソフトウェアのインストール手順に従って Ruby をインストールできます。インストールプロセス中は、以下の図に示すように、C ドライブにインストールし、インストールプロセス中に 2 番目のオプションを選択することをお勧めします (選択しない場合、コンパイル中に Ruby 環境が見つかりません)。

Ruby がインストールされたら、以下の図に示すように、スタート メニューで新しくインストールされた Ruby を見つけ、Ruby のコマンド コントロール パネルを起動します:

Ruby がコンピューターにインストールされたら、Sass をインストールできます。

コマンドを使用して Sass をインストールします

コンピューターのコマンド ターミナルを開き、次のコマンドを入力します:

gem install sass

Mac を使用している学生は、機能させるために上記のコマンドの前に「sudo」を追加する必要がある場合があります。インストール:

sudo gem install sass

Sass とアップデートを確認する

Sass が正常にインストールされたかどうかを確認するには?

sass -v

Sass を更新

gem update sass

Sass をアンインストール (削除)

gem uninstall sass

Sass コンパイル

Sass を開発に使用するか、プロジェクト内で参照します「 .css」ファイル。Sass は、必要な場合にのみ効果を発揮する、事前の処理を支援する前処理ツールです。

Sass をコンパイルするには、さまざまな方法があります

:

コマンドのコンパイル GUI ツールのコンパイル

自動コンパイル

コマンドのコンパイル

命令编译是指使用你电脑中的命令终端，通过输入 Sass 指令来编译 Sass。这种编译方式是最直接也是最简单的一种方式。因为只需要在你的命令终端输入：

单文件编译：

sass <要编译的Sass文件路径>/style.scss:<要输出CSS文件路径>/style.css

多文件编译：

sass sass/:css/

缺点及解决方法：

在实际编译过程中，你会发现上面的命令，只能一次性编译。每次个性保存“.scss”文件之后，都得重新执行一次这样的命令。如此操作太麻烦，其实还有一种方法，就是在编译 Sass 时，开启“watch”功能，这样只要你的代码进行任保修改，都能自动监测到代码的变化，并且给你直接编译出来：

sass --watch <要编译的Sass文件路径>/style.scss:<要输出CSS文件路径>/style.css

例：

单文件转换命令

sass style.scss style.css

单文件监听命令

sass --watch style.scss:style.css

文件夹监听命令

sass --watch sassstyle:stylesheets

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

sass --watch style.scss:style.css --style compactsass --watch style.scss:style.css --sourcemapsass --watch style.scss:style.css --style expanded --sourcemapsass --watch style.scss:style.css --debug-info

 --style  表示解析后的css是什么格式，有四种取值分别为： nested 嵌套输出方式， expanded 展开输出方式， compact 紧凑输出方式， compressed 压缩输出方式。

 --sourcemap 表示开启sourcemap调试。开启sourcemap调试后，会生成一个后缀名为.css.map文件。

 --debug-info 表示开启debug信息，升级到3.3.0之后因为sourcemap更高级，这个debug-info就不太用了。

 

四种style生成后的css：

 1 // nested 2 #main { 3  color: #fff; 4  background-color: #000;  5 } 6  #main p { 7  width: 10em;  8 } 9 .huge {10  font-size: 10em;11  font-weight: bold;12  text-decoration: underline;13 }14 // expanded15 #main {16  color: #fff;17  background-color: #000;18 }19 #main p {20  width: 10em;21 }22 .huge {23  font-size: 10em;24  font-weight: bold;25  text-decoration: underline;26 }27 // compact28 #main { color: #fff; background-color: #000; }29 #main p { width: 10em; }30 .huge { font-size: 10em; font-weight: bold; text-decoration: underline; }31 // compressed32 #main{color:#fff;background-color:#000}#main p{width:10em}.huge{font-size:10em;font-weight:bold;text-decoration:underline}

 

 

GUI编译Sass，我用的是koala。

1. Koala (http://koala-app.com/)
2. Compass.app（http://compass.kkbox.com/）
3. Scout（http://mhs.github.io/scout-app/）
4. CodeKit（https://incident57.com/codekit/index.html）
5. Prepros（https://prepros.io/）

相比之下推荐使用以下两个：

Koala (http://www.w3cplus.com/preprocessor/sass-gui-tool-koala.html) 

CodeKit (http://www.w3cplus.com/preprocessor/sass-gui-tool-codekit.html)

 

koala工具   http://koala-app.com/index-zh.html

sass文件需要以.scss来结尾。创建完成需要

把css文件拖到软件中去，这样就可以将sass转化成css了

sass不支持中文

需要在 koala => rubygems => sass => lib => sass => engine.rb

engine.rb打开加入一句Encoding.default_external = Encoding.find('UTF-8')
 

sass配置，输出一般用展开的形式就可以

 

 

自动化编译

 

1、Grunt 配置 Sass 编译的示例代码

 1 module.exports = function(grunt) { 2     grunt.initConfig({ 3         pkg: grunt.file.readJSON('package.json'), 4         sass: { 5             dist: { 6                 files: { 7                     'style/style.css' : 'sass/style.scss' 8                 } 9             }10         },11         watch: {12             css: {13                 files: '**/*.scss',14                 tasks: ['sass']15             }16         }17     });18     grunt.loadNpmTasks('grunt-contrib-sass');19     grunt.loadNpmTasks('grunt-contrib-watch');20     grunt.registerTask('default',['watch']);21 }

 

2、Gulp 配置 Sass 编译的示例代码

 1 var gulp = require('gulp'); 2 var sass = require('gulp-sass'); 3  4 gulp.task('sass', function () { 5     gulp.src('./scss/*.scss') 6         .pipe(sass()) 7         .pipe(gulp.dest('./css')); 8 }); 9 10 gulp.task('watch', function() {11     gulp.watch('scss/*.scss', ['sass']);12 });13 14 gulp.task('default', ['sass','watch']);

没用过Grunt 、Gulp ，放两个案例在这慢慢研究