書きやすく読みやすいCSS開発ツール --SASS_html/css_WEB-ITnose-htmlチュートリアル-php.cn

書きやすく読みやすいCSS開発ツール --SASS_html/css_WEB-ITnose

WBOY

リリース： 2016-06-24 11:43:14

オリジナル

1058 人が閲覧しました

最近、CSS プリプロセッサ?? SASS に出会い、新しいプロジェクトにデプロイしました

これまでの経験に非常に満足しており、期待された効果が得られました。以前使用していた言語が少なくなり、コスト効率が向上しました

SASS は CSS ワークフローを簡素化し、スタイルの設計を容易にし、日常的に読みやすく保守しやすくします

CSS 自体はカスケードスタイルシートであり、はプログラミング言語ではありません。プログラミング要素を強化するために、CSS 専用の CSS プリプロセッサが登場しました。これは、ある程度プログラミング言語

としても理解できます。SASS は、変数、継承、ステートメントなどを提供します。 . 使い方、プログラミング言語のようにCSSを書く

SASSのインストールと使い方

インストール

まずRubyをインストールする必要があります、そして次にSASSをインストールすることができます

著者はRubyとは何ですか？ , 彼は、SASS が Ruby であることしか知りません開発者にとって、SASS を書くために Ruby を知る必要はありませんが、SASS をインストールしたい場合は、まず Ruby をインストールする必要があります

開発環境に合った Ruby のバージョンをオンラインでダウンロードし、インストール後にコマンドラインを実行します

gem -vruby -v

ログイン後にコピー

操作が成功するとバージョン番号が返されます

SASSを直接インストールすることもできました

gem install sass

ログイン後にコピー

ブロックされているため、おそらく機能しないため、 Taobao RubyGems ミラーに戻って SASS をインストールします

gem sources --remove https://rubygems.org/gem sources -a https://ruby.taobao.org/gem sources -l

ログイン後にコピー

操作が成功すると、ソースポイントパスが返されます。ソースポイントパスは一意である必要があることに注意してください

SASS を再度インストールします

gem install sass

ログイン後にコピー

SASS をアップグレードします。

gem update sass

ログイン後にコピー

を使用してコマンドラインを実行し、コンパイルされた CSS コードを直接表示します。これには実質的な効果はありません

sass init.sass

ログイン後にコピー

SASS ファイルをコンパイルして CSS ファイルに変換します

sass init.scss init.css

ログイン後にコピー

SASS を次のように持つ開発ファイルなので、通常は CSS ファイルをコンパイルするときに直接圧縮を選択します

sass --style compressed init.sass init.css

ログイン後にコピー

SASS には 4 つのコンパイルスタイルがあり、プライベートで 1 つずつ体験できます

nested：嵌套并且缩进，默认值expanded：嵌套但不缩进compact：简洁格式compressed：压缩

ログイン後にコピー

SASS ファイルを監視し、自動的にコンパイルして CSS ファイルに変換します変更が発生したとき

sass --watch init.scss:init.css --style compressed

ログイン後にコピー

コンパイルプロセス中に文法エラーがある場合、コンパイルは失敗します

WebStorm エディタをインストールします

崇高です、Dreamweaver です。非常に弱いので、WebStorm エディタをダウンロードしてインストールして SASS で遊んでください

国際的な慣例として、WebStorm エディタを披露してください

ファイルの先頭で UTF8 エンコーディングを宣言することに注意してください。そうしないと、コメントに中国語がある場合、コンパイル中にエラーが報告されます

@charset "utf-8"

ログイン後にコピー

SASS 構文

基本的な使い方

変数

$cl: #333body	color: $cl

ログイン後にコピー

計算

$sz: 14px$ln: $sz * 1.5

ログイン後にコピー

ネストセレクター、属性、疑似クラスのネストメソッド)

.index	border: 1px solid #ccc		top: 3px solid #999		radius: 5px	a		color: #666		&:hover,&.active			#333

ログイン後にコピー

メモ

/* 首页 *///导航条

ログイン後にコピー

コードの再利用

継承

html	height: 100%.index	@extend html

ログイン後にコピー

ミキシング

@mixin txt ()	overflow: hidden	white-space: nowrap	text-overflow: ellipsis@mixin rads ($v: 2px)	-webkit-border-radius: $v	-moz-border-radius: $v	border-radius: $v.index	width: 200px	@include txt	@include rads(50%)

ログイン後にコピー

ファイルリファレンス

高度なステートメント

条件

@import '../base/set'

ログイン後にコピー

ループステートメント

$cl: #333.index	@if lightness($cl) > 30%		color: #666	@else		color: #999

ログイン後にコピー

カスタム関数

@for $i from 1 to 10	.module_#{$i}		background: url(../image/module_#{i}.png) 50% no-repeat$i: 0@while $i < 10	$i: $i + 1	.module_#{$i}		background: url(../image/module_#{i}.png) 50% no-repeat$arr: (1, 2, 3, 4, 5, 6, 7, 8, 9, 10)@each $i in $arr	.module_#{$i}		background: url(../image/module_#{i}.png) 50% no-repeat

ログイン後にコピー

シーンに合わせて現在使用されていないカラー関数などもあり、SASS/SCSS/LESS は直接 CSS と比較して確認することはできません。 SASS/SCSS/LESS は CSS の記述方法を強化するだけであり、最終的なページ参照ファイルは変換された CSS ファイルをコンパイルする必要があります