慕課網CSSワークアプリケーション+面接(6)プリプロセッサ
8148 ワード
1.紹介
CSSベースの別の言語はツールを通じてCSSにコンパイルして多くのCSSが備えていない特性を追加してCSSファイルの組織を向上させることができます
CSSプリプロセッサ:Less(Nodeベース)、Sass(Rubyベース)
CSSプリプロセッサ機能:1.ネストされた反映レベルと制約2.変数と計算は重複コード3を減らす.ExtendとMixinコードフラグメントの多重化4.ループは複雑で規則的なスタイル5に適用される.import CSSファイルモジュール化
LessとSassのコンパイルはkoalaが使えて便利です.
2.lessネスト
3.sassネスト
4.less変数
5.sass変数
lessでは変数に@を使用し、sassでは変数に$を使用します.
6.less mixin
mixin:コードを多重化するには、類似クラスとパラメータとして理解できます.
元のcssで処理するには、コードスタイルを多重化します.
パラメータがない場合は、()を省略して直接書くことができます.
7.sass mixin
mixinではlessよりsassが多い@mixinとinclude.
8.less extend
mixinをcssにコンパイルした後、同じスタイルを何度も書いたことがあるので、これらのスタイルを統一的に提案することができます.次のようになります.
CSSコードを減らすことで、CSSファイルのボリュームを減らすことができます.
上記の問題を解決するためにextendが生まれた.
.block、.wrapper .nav、.wrapper .contentパブリックスタイルが抽出されました.
9.sass extend
lessとsassの比較:
10.less loop
loop:ループ
11.sass loop
12.less import
importは主にモジュール化の問題を解決する.
コンパイル後CSS:
13.sass import
14.プリプロセッサフレームワーク
SASS対応Compass Less対応Lesshat/EST
プリプロセッサフレームワーク:既存のmixin類似JSクラスライブラリを提供し、一般的な機能をカプセル化する
15.CSS面接の本題
1.一般的なCSSプリプロセッサ
Less(Node.js)Sass(Ruby、Nodeバージョンあり)
2.プリプロセッサの役割
CSSコードをよりよく整理し、コードの多重性を高め、メンテナンス性を向上させる
3.プリプロセッサの機能
1.ネスト反映レベルと制約2.変数と計算は重複コード3を減らす.ExtendとMixinコードフラグメントの多重化4.ループは複雑で規則的なスタイル5に適用される.import CSSファイルモジュール化
4.プリプロセッサのメリットとデメリット
利点:コード多重化率とメンテナンス性の向上の欠点:コンパイルプロセスを導入する必要があり、学習コストがある
CSSベースの別の言語はツールを通じてCSSにコンパイルして多くのCSSが備えていない特性を追加してCSSファイルの組織を向上させることができます
CSSプリプロセッサ:Less(Nodeベース)、Sass(Rubyベース)
CSSプリプロセッサ機能:1.ネストされた反映レベルと制約2.変数と計算は重複コード3を減らす.ExtendとMixinコードフラグメントの多重化4.ループは複雑で規則的なスタイル5に適用される.import CSSファイルモジュール化
LessとSassのコンパイルはkoalaが使えて便利です.
2.lessネスト
//less
.wrapper{
background:white;
.nav{
font-size: 12px;
}
.content{
font-size: 14px;
&:hover{
background:red;
}
}
}
//css
.wrapper {
background: white;
}
.wrapper .nav {
font-size: 12px;
}
.wrapper .content {
font-size: 14px;
}
.wrapper .content:hover {
background: red;
}
3.sassネスト
//sass
body{
padding:0;
margin:0;
}
.wrapper{
background:white;
.nav{
font-size: 12px;
}
.content{
font-size: 14px;
&:hover{
background:red;
}
}
}
4.less変数
// less
@fontSize: 12px;
@bgColor: red;
body{
padding:0;
margin:0;
}
.wrapper{
background:lighten(@bgColor, 40%);
.nav{
font-size: @fontSize;
}
.content{
font-size: @fontSize + 2px;
&:hover{
background:@bgColor;
}
}
}
//css
body {
padding: 0;
margin: 0;
}
.wrapper {
background: #ffcccc;
}
.wrapper .nav {
font-size: 12px;
}
.wrapper .content {
font-size: 14px;
}
.wrapper .content:hover {
background: #ff0000;
}
5.sass変数
//sass
$fontSize: 12px;
$bgColor: red;
body{
padding:0;
margin:0;
}
.wrapper{
background:lighten($bgColor, 40%);
.nav{
font-size: $fontSize;
}
.content{
font-size: $fontSize + 2px;
&:hover{
background:red;
}
}
}
lessでは変数に@を使用し、sassでは変数に$を使用します.
6.less mixin
mixin:コードを多重化するには、類似クラスとパラメータとして理解できます.
元のcssで処理するには、コードスタイルを多重化します.
// class .block{ }
mixin:
//less
@fontSize: 12px;
@bgColor: red;
.box{
color:green;
}
.box1{
.box();
line-height: 2em;
}
.box2{
.box();
line-height: 3em;
}
.block(@fontSize){
font-size: @fontSize;
border: 1px solid #ccc;
border-radius: 4px;
}
body{
padding:0;
margin:0;
}
.wrapper{
background:lighten(@bgColor, 40%);
.nav{
.block(@fontSize);
}
.content{
.block(@fontSize + 2px);
&:hover{
background:red;
}
}
}
//css
.box {
color: green;
}
.box1 {
color: green;
line-height: 2em;
}
.box2 {
color: green;
line-height: 3em;
}
body {
padding: 0;
margin: 0;
}
.wrapper {
background: #ffcccc;
}
.wrapper .nav {
font-size: 12px;
border: 1px solid #ccc;
border-radius: 4px;
}
.wrapper .content {
font-size: 14px;
border: 1px solid #ccc;
border-radius: 4px;
}
.wrapper .content:hover {
background: red;
}
パラメータがない場合は、()を省略して直接書くことができます.
.box{
}
//
.box1{
.box();
}
.box2{
.box();
}
7.sass mixin
//sass
$fontSize: 12px;
$bgColor: red;
@mixin block($fontSize){
font-size: $fontSize;
border: 1px solid #ccc;
border-radius: 4px;
}
body{
padding:0;
margin:0;
}
.wrapper{
background:lighten($bgColor, 40%);
.nav{
@include block($fontSize);
}
.content{
@include block($fontSize + 2px);
&:hover{
background:red;
}
}
}
mixinではlessよりsassが多い@mixinとinclude.
8.less extend
mixinをcssにコンパイルした後、同じスタイルを何度も書いたことがあるので、これらのスタイルを統一的に提案することができます.次のようになります.
//
.wrapper .nav {
font-size: 12px;
border: 1px solid #ccc;
border-radius: 4px;
}
.wrapper .content {
font-size: 14px;
border: 1px solid #ccc;
border-radius: 4px;
}
//
.wrapper .nav,
.wrapper .content{
border: 1px solid #ccc;
border-radius:4px;
}
CSSコードを減らすことで、CSSファイルのボリュームを減らすことができます.
上記の問題を解決するためにextendが生まれた.
//less
@fontSize: 12px;
@bgColor: red;
.block{
font-size: @fontSize;
border: 1px solid #ccc;
border-radius: 4px;
}
body{
padding:0;
margin:0;
}
.wrapper{
background:lighten(@bgColor, 40%);
.nav:extend(.block){ //.nav .block
color: #333;
}
.content{
&:extend(.block); //.content .block
&:hover{
background:red;
}
}
}
//css
.block,
.wrapper .nav,
.wrapper .content {
font-size: 12px;
border: 1px solid #ccc;
border-radius: 4px;
}
body {
padding: 0;
margin: 0;
}
.wrapper {
background: #ffcccc;
}
.wrapper .nav {
color: #333;
}
.wrapper .content:hover {
background: red;
}
.block、.wrapper .nav、.wrapper .contentパブリックスタイルが抽出されました.
9.sass extend
//sass
$fontSize: 12px;
$bgColor: red;
.block{
font-size: $fontSize;
border: 1px solid #ccc;
border-radius: 4px;
}
body{
padding:0;
margin:0;
}
.wrapper{
background:lighten($bgColor, 40%);
.nav{
@extend .block;
color: #333;
}
.content{
@extend .block;
&:hover{
background:red;
}
}
}
lessとsassの比較:
//less
.nav:extend(.block){ //.nav .block
color: #333;
}
//sass
.nav{
@extend .block;
color: #333;
}
10.less loop
loop:ループ
//less
.gen-col(@n) when (@n > 0){
.gen-col(@n - 1);
.col-@{n}{
width: 1000px/12*@n;
}
}
.gen-col(12);
//css
.col-1 {
width: 83.33333333px;
}
.col-2 {
width: 166.66666667px;
}
.col-3 {
width: 250px;
}
.col-4 {
width: 333.33333333px;
}
.col-5 {
width: 416.66666667px;
}
.col-6 {
width: 500px;
}
.col-7 {
width: 583.33333333px;
}
.col-8 {
width: 666.66666667px;
}
.col-9 {
width: 750px;
}
.col-10 {
width: 833.33333333px;
}
.col-11 {
width: 916.66666667px;
}
.col-12 {
width: 1000px;
}
11.sass loop
// sass
@for $i from 1 through 12 {
.col-#{$i} {
width: 1000px/12*$i;
}
}
12.less import
importは主にモジュール化の問題を解決する.
@import "./6-import-variable";
@import "./6-import-module1";
@import "./6-import-module2";
//6-import-module1
.module1{
.box{
font-size:@fontSize + 2px;
color:@themeColor;
}
.tips{
font-size:@fontSize;
color:lighten(@themeColor, 40%);
}
}
//6-import-module2
.module2{
.box{
font-size:@fontSize + 4px;
color:@themeColor;
}
.tips{
font-size:@fontSize + 2px;
color:lighten(@themeColor, 20%);
}
}
//6-import-variable
@themeColor: blue;
@fontSize: 14px;
コンパイル後CSS:
.module1 .box {
font-size: 16px;
color: #0000ff;
}
.module1 .tips {
font-size: 14px;
color: #ccccff;
}
.module2 .box {
font-size: 18px;
color: #0000ff;
}
.module2 .tips {
font-size: 16px;
color: #6666ff;
}
13.sass import
@import "./6-import-variable";
@import "./6-import-module1";
@import "./6-import-module2";
.module1{
.box{
font-size:$fontSize + 2px;
color:$themeColor;
}
.tips{
font-size:$fontSize;
color:lighten($themeColor, 40%);
}
}
.module2{
.box{
font-size:$fontSize + 4px;
color:$themeColor;
}
.tips{
font-size:$fontSize + 2px;
color:lighten($themeColor, 20%);
}
}
$themeColor: blue;
$fontSize: 14px;
14.プリプロセッサフレームワーク
SASS対応Compass Less対応Lesshat/EST
プリプロセッサフレームワーク:既存のmixin類似JSクラスライブラリを提供し、一般的な機能をカプセル化する
15.CSS面接の本題
1.一般的なCSSプリプロセッサ
Less(Node.js)Sass(Ruby、Nodeバージョンあり)
2.プリプロセッサの役割
CSSコードをよりよく整理し、コードの多重性を高め、メンテナンス性を向上させる
3.プリプロセッサの機能
1.ネスト反映レベルと制約2.変数と計算は重複コード3を減らす.ExtendとMixinコードフラグメントの多重化4.ループは複雑で規則的なスタイル5に適用される.import CSSファイルモジュール化
4.プリプロセッサのメリットとデメリット
利点:コード多重化率とメンテナンス性の向上の欠点:コンパイルプロセスを導入する必要があり、学習コストがある