Sass(SCSS)
をテンプレートにして作成
LECTURE
担当科目一覧
コンピュータ概論/2023
?
データサイエンス/2023
?
3DCG演習/2023
?
情報デザイン概論/2023
?
情報デザイン研究/2023
?
卒業研究/2023
?
KEYWORDS
WEB DESIGN
SOCIAL DESIGN
SQUARES
LINKS
九州産業大学
芸術学部
芸術研究科
九産大美術館
九産大図書館
年間スケジュール
動画ニュース他
交通情報
気象・環境情報
危機に備えて
K'sLife
Office365Mail
Tools
SEARCH
開始行:
*Sass(SCSS)
~
Sass(Syntactically Awesome Stylesheets)は、2006年ハンプト...
style.scss > コンパイル(要Ruby等) > style.css
という作業の流れでCSSを生成します。
~
&color(red){この記事は、Sass(SCSS)導入の概要のみを記述し...
~
**導入の前提
Sass(SCSS)はプログラミングの要素を持った言語で、書いたも...
参考:でも、以下のような方法で試すことも可能です
http://websae.net/sass-meister-20140708/
~
***Ruby
Sassを使えるようにするために、[[Ruby>Google:Ruby]]が必要...
$ ruby -v
~
***Koala
ターミナルからコンパイルすることもできますが、Koalaという...
-http://koala-app.com/
//-[[Koala 開発環境の使い方>]]
~
***補足
-ターミナルの利用ができれば簡単です。
-rubyの存在確認
$ ruby -v
-念のため RubyGemsをアップデート
$ sudo gem update --system
-Sassをインストール
$ sudo gem install sass
-Sass の存在を確認
$ sass -v
-style.scss があるとして、以下でCSSが生成できます。
$ sass --style expanded style.scss:style.css
-Atomのパッケージ追加でも可能
ちなみにAtomにも sass-autocompile というパッケージを導入...
~
~
**記述の利点
***セレクタのネストができる
-SCSSの記述
.box{
padding: 20px;
h1{
font-size: 16px;
}
}
-CSSの記述
.box {
padding: 20px;
}
.box h1 {
font-size: 16px;
}
~
***変数が使える
-SCSSの記述
$blue: #55AAFF;
.box{
color: $blue;
}
-CSSの記述
.box {
color: #55AAFF;
}
~
***その他
-演算子が使える
-制御構文( if for while など)がある
-関数が使える
-ミックスイン(Mixin, @include)が使える
など、要するにこれは、CSSを能率的に生成するためのプログラ...
ここでは、Sass(SCSS)の概要のみしか書いていませんので、具...
-[[Google: Sass 入門]]
-[[Google: Sass SCSS サンプルコード]]
-[[Google: Sass koala]]
~
~
終了行:
*Sass(SCSS)
~
Sass(Syntactically Awesome Stylesheets)は、2006年ハンプト...
style.scss > コンパイル(要Ruby等) > style.css
という作業の流れでCSSを生成します。
~
&color(red){この記事は、Sass(SCSS)導入の概要のみを記述し...
~
**導入の前提
Sass(SCSS)はプログラミングの要素を持った言語で、書いたも...
参考:でも、以下のような方法で試すことも可能です
http://websae.net/sass-meister-20140708/
~
***Ruby
Sassを使えるようにするために、[[Ruby>Google:Ruby]]が必要...
$ ruby -v
~
***Koala
ターミナルからコンパイルすることもできますが、Koalaという...
-http://koala-app.com/
//-[[Koala 開発環境の使い方>]]
~
***補足
-ターミナルの利用ができれば簡単です。
-rubyの存在確認
$ ruby -v
-念のため RubyGemsをアップデート
$ sudo gem update --system
-Sassをインストール
$ sudo gem install sass
-Sass の存在を確認
$ sass -v
-style.scss があるとして、以下でCSSが生成できます。
$ sass --style expanded style.scss:style.css
-Atomのパッケージ追加でも可能
ちなみにAtomにも sass-autocompile というパッケージを導入...
~
~
**記述の利点
***セレクタのネストができる
-SCSSの記述
.box{
padding: 20px;
h1{
font-size: 16px;
}
}
-CSSの記述
.box {
padding: 20px;
}
.box h1 {
font-size: 16px;
}
~
***変数が使える
-SCSSの記述
$blue: #55AAFF;
.box{
color: $blue;
}
-CSSの記述
.box {
color: #55AAFF;
}
~
***その他
-演算子が使える
-制御構文( if for while など)がある
-関数が使える
-ミックスイン(Mixin, @include)が使える
など、要するにこれは、CSSを能率的に生成するためのプログラ...
ここでは、Sass(SCSS)の概要のみしか書いていませんので、具...
-[[Google: Sass 入門]]
-[[Google: Sass SCSS サンプルコード]]
-[[Google: Sass koala]]
~
~
ページ名: