Sass(Scss)でCSSを書いてみよう
1.Sass(Scss)とは？
サイト制作する際に、HTMLが複雑になってきてcssのコードがちらばったり
同じスタイルコードを使いまわすのに別のコードをコピペするなどあるとおもいます。
このようなCSSを使う上で面倒になりがちな部分を、プログラム的に置き換えて無駄を排除しようと考えられたのがSassです。
今回はこのSassについて紹介したいと思います。
2.環境構築
Sassを使えるようにするために、まずRubyをインストールします。
↑のページからインストーラをダウンロードして、
「Rubyの実行ファイルへ環境PATHを設定する」にチェックをしてインストールを行います。
Rubyのインストールが完了したら、次にSassをインストールします。
↓ Sassのインストール手順は以下になります。
1.コマンドプロンプトを起動
2.gem install sassと入力する
3.しばらく待機するとインストール完了
続いて
ダウンロード先:Koala
↑のページからSassで書いたファイルをCSSにコンパイルするソフトをダウンロードし
インストールを行います。以上で環境構築は終了なので次は実際にソフトをつかって
3.Sass(Scss)を書いてみる
KoalaでSass(Scss)を書く手順を説明します。
1.テキストエディタで、任意のフォルダに.scssファイルを作成します。
2. 作成した.scssファイルにScss形式でcssを記述します。
3. .scssファイルを含んだフォルダをKoalaにドラッグ＆ドロップすると.cssファイルにコンパイルされます。
.scssの緑のファイルアイコンをクリックすると画面右にオプションメニューが現れ
書き出し方法を指定することも可能です。
・dynamic compilation：動的コンパイルを行う
・compass ・・・ フレームワークcompassを使用するか
・line comments ・・・書き出す際にSassの行数コメントをいれるか
・debug info ・・・ デバッグ用タグ@media -sass-debug-infoをいれる
・unix newlines ・・・unixの改行コードにするか
・output style ・・・書き出しスタイルが指定
各書き出しスタイルの表示サンプル
#main {
color: #fff;
background-color: #000; }
#main p {
width: 10em; }
.content{
font-size: 10em;
font-weight: bold;
text-decoration: underline; }
#main {
color: #fff;
background-color: #000;
}
#main p {
width: 10em;
}
.content{
font-size: 10em;
font-weight: bold;
text-decoration: underline;
}
#main { color: #fff; background-color: #000; }
#main p { width: 10em; }
.huge { font-size: 10em; font-weight: bold; text-decoration: underline; }
#main{color:#fff;background-color:#000}#main p{width:10em}.huge{font-size:10em;font-weight:bold;text-decoration:underline}
環境が整ったので.Sassの構文を少し紹介
①Sassでは変数が利用可能
Sassでは変数を利用できる。よく利用する値をあらかじめ変数化しておき、それを自由に呼び出して利用できる。
変数は、「$」の後に定義できます
$width:500px;
$color:#aa443f;
#maincontainer{
width:$width;
color:$color;
}
②SassではCSSの継承はネストを用いて簡潔に記述できる。
#main{
background-color:#000;
.content{
background-color:#aaa;
color:#000;
.sidebar{
padding:10px;
}
}
}
↓（コンパイル結果）
#main {
background-color: black;
}
#main .content {
background-color: #aaaaaa;
color: black;
}
#main .content .sidebar {
padding: 10px;
}
その他のSassの書き方は色々なサイトに載っているのでぜひ使ってみてはどうでしょう！
だいぶcssがすっきりして見やすくなりますしおすすめです。
Author And Source
この問題について(Sass(Scss)でCSSを書いてみよう), 我々は、より多くの情報をここで見つけました https://qiita.com/nishiemon/items/71b086a83eb4da32af8d著者帰属：元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .