数千行のコードを含む単一のCSSファイルがあるプロジェクトの場合、再利用できません。ロジックがすぐに乱雑になり、管理が難しくなります。純粋なCSSの上記の問題を克服するのに役立つ機能を提供できるツールを見つける必要があり
数千行のコードを含む単一のCSSファイルがあるプロジェクトの場合、再利用できません。ロジックがすぐに乱雑になり、管理が難しくなります。純粋なCSSの上記の問題を克服するのに役立つ機能を提供できるツールを見つける必要があります。 SASSは有力な候補です。
この記事では、NALのSEファン ティ トゥ ハンが情報技術を学ぶ人に以下の情報を提供します。
-SASSの概要
-SASSの仕組み
-SASSの機能とその使用方法
- 1. SASSの概要
1.1。 SASSとは？
SASSはCSSプリプロセッサです。 SASSは、CSSにはない機能とツールを提供し、CSSの動作方法を変更しないため、SASSは非常に親しみやすく学習しやすくなっています。
1.2。 SASSはどのように機能しますか？
通常のCSSコードでCSSファイルを書き込む代わりに、SASSコードをSASSファイルに書き込んでからコンパイラーを実行すると、コンパイラーはSASSコードを通常のCSSコードに変換します。これがプリプロセッサと呼ばれる理由です。 LESSやSTYLUSなどの他のプリプロセッサもありますが、SASSが最も一般的です。
1.3。 SASSにはどのような機能がありますか？
-まず、SASSは変数を提供し、色、フォントサイズ、間隔などの再利用可能な値を使用できるようにします。
-ネスティングは、より少ないコードを書くのに役立ちます。
-演算子により、CSS内で直接計算を実行できます。
-パーシャルとインポートにより、CSSを他のファイルに書き込んで単一のファイルにインポートできます。
-ミックスインを使用すると、再利用可能なCSSスニペットを記述できます。
-ミックスインのような関数は、再利用可能な値を作成するという点で異なります。
-Extendは、異なるセレクターに共通の宣言を継承させることができます。
-最後に、方向制御により、条件とループ（このコースには含まれません）を使用して複雑なコードを記述できます。
- 2. SASSの機能
実際には2つのSASS構文があります。
SASSと呼ばれる元の構文にはインデントの構文があり、中括弧やセミコロンは使用されません。
SCSS構文。元のCSSの外観を保持します。
この記事の例はすべてSCSS構文に従い、コードペンを使用してコードを記述します。
Codepenを使用すると、数回クリックするだけで必要なコンポーネントをすばやく初期化できます。理解を深めるために画像を見ることができます。
以下のすべての例は、以下の同じHTMLコードを使用し、結果の画像を実現します
2.1。変数とネスト
* {
margin: 0;
padding: 0;
}
$color-primary: #f9ed69; //yellow color
$color-secondary: #f08a6d; //orange
$color-tertiary: #b83b5e; //pink
$color-text-dark: #333;
$color-text-light: #eee;
$width-button: 150px;
nav {
margin: 30px;
background-color: $color-primary;
&::after {
content: "";
clear: both;
display: table;
}
}
.navigation {
list-style: none;
float: left;
li {
display: inline-block;
margin-left: 30px;
&:first-child {
margin: 0;
}
a:link {
text-decoration: none;
text-transform: uppercase;
color: $color-text-dark;
}
}
}
.buttons {
float: right;
}
.btn-main:link,
.btn-hot:link {
padding: 10px;
display: inline-block;
text-align: center;
border-radius: 100px;
text-decoration: none;
text-transform: uppercase;
width: $width-button;
color: $color-text-light;
}
.btn-main {
&:link {
background-color: $color-secondary;
}
&:hover {
background-color: darken($color-secondary, 15%);
}
}
.btn-hot {
&:link {
background-color: $color-secondary;
}
&:hover {
background-color: lighten($color-secondary, 10%);
}
}
変数はどのように機能しますか？
変数はコンテナーのようなもので、データを格納でき、コードで再利用できるため、値を変更する場合は、一度定義するだけでどこでも使用できます。変数の値は変数の割り当てで変更されるだけで、コード全体で自動的に変更されます。
ネストはどのように機能しますか？
ネストされたセレクターは、別のネストされたセレクター内で使用できます。繰り返しをなくすには、繰り返し要素を演算子＆に置き換えます。
（この＆オペレーターは基本的にセレクターパスを記述しています）
2.2。 SASSでのミックスイン、拡張、機能
2.2.1。混入します
再利用可能なコードであり、使用したい場合は、使用する場所に配置されます。これは、多くのコード行を持つ大きな変数と見なすことができます。また、ミックスインで使用する引数を渡すこともできます。
* {
margin: 0;
padding: 0;
}
$color-primary: #f9ed69; //yellow color
$color-secondary: #f08a6d; //orange
$color-tertiary: #b83b5e; //pink
$color-text-dark: #333;
$color-text-light: #ee;
$width-button: 150px;
@mixin clearfix {
&::after {
content: "";
clear: both;
display: table;
}
}
@mixin style-link-text($color) {
text-decoration: none;
text-transform: uppercase;
color: $color;
}
nav {
margin: 30px;
background-color: $color-primary;
@include clearfix;
}
.navigation {
list-style: none;
float: left;
li {
display: inline-block;
margin-left: 30px;
&:first-child {
margin: 0;
}
a:link {
@include style-link-text($color-text-dark);
}
}
}
.buttons {
float: right;
}
.btn-main:link,
.btn-hot:link {
padding: 10px;
display: inline-block;
text-align: center;
border-radius: 100px;
width: $width-button;
@include style-link-text($color-text-light);
}
.btn-main {
&:link {
background-color: $color-secondary;
}
&:hover {
background-color: darken($color-secondary, 15%);
}
}
.btn-hot {
&:link {
background-color: $color-secondary;
}
&:hover {
background-color: lighten($color-secondary, 10%);
}
}
2.2.2。伸ばす
別のセレクターのスタイルを継承するためにセレクターが必要な場合に使用されます。たとえば、class = “error-serious”はclass = “error”のスタイルを継承する必要があります。
* {
margin: 0;
padding: 0;
}
$color-primary: #f9ed69; //yellow color
$color-secondary: #f08a6d; //orange
$color-tertiary: #b83b5e; //pink
$color-text-dark: #333;
$color-text-light: #ee;
$width-button: 150px;
@mixin clearfix {
&::after {
content: "";
clear: both;
display: table;
}
}
@mixin style-link-text($color) {
text-decoration: none;
text-transform: uppercase;
color: $color;
}
@function divide($a, $b) {
@return $a/$b;
}
nav {
margin: divide(60, 2) * 1px;
background-color: $color-primary;
@include clearfix;
}
.navigation {
list-style: none;
float: left;
li {
display: inline-block;
margin-left: 30px;
&:first-child {
margin: 0;
}
a:link {
@include style-link-text($color-text-dark);
}
}
}
.buttons {
float: right;
}
btn-placeholder {
padding: 10px;
display: inline-block;
text-align: center;
border-radius: 100px;
width: $width-button;
@include style-link-text($color-text-light);
}
.btn-main {
&:link {
@extend btn-placeholder;
background-color: $color-secondary;
}
&:hover {
@extend btn-placeholder;
background-color: darken($color-secondary, 15%);
}
}
.btn-hot {
&:link {
@extend btn-placeholder;
background-color: $color-secondary;
}
&:hover {
@extend btn-placeholder;
background-color: lighten($color-secondary, 10%);
}
}
2.2.3。関数
関数を使用すると、SASSスクリプトで記述された値に対して複雑な操作を定義でき、スタイルシートの多くの場所でそれらを再利用できます。関数は、一般的な数式と動作を読みやすい方法で抽象化するのに役立ちます。最終的に気になっているのは、返される値だけです。
* {
margin: 0;
padding: 0;
}
$color-primary: #f9ed69; //yellow color
$color-secondary: #f08a6d; //orange
$color-tertiary: #b83b5e; //pink
$color-text-dark: #333;
$color-text-light: #ee;
$width-button: 150px;
@mixin clearfix {
&::after {
content: "";
clear: both;
display: table;
}
}
@mixin style-link-text($color) {
text-decoration: none;
text-transform: uppercase;
color: $color;
}
@function divide($a, $b) {
@return $a/$b;
}
nav {
margin: divide(60, 2) * 1px;
background-color: $color-primary;
@include clearfix;
}
.navigation {
list-style: none;
float: left;
li {
display: inline-block;
margin-left: 30px;
&:first-child {
margin: 0;
}
a:link {
@include style-link-text($color-text-dark);
}
}
}
.buttons {
float: right;
}
.btn-main:link,
.btn-hot:link {
padding: 10px;
display: inline-block;
text-align: center;
border-radius: 100px;
width: $width-button;
@include style-link-text($color-text-light);
}
.btn-main {
&:link {
background-color: $color-secondary;
}
&:hover {
background-color: darken($color-secondary, 15%);
}
}
.btn-hot {
&:link {
background-color: $color-secondary;
}
&:hover {
background-color: lighten($color-secondary, 10%);
}
}
- 3. SASSをローカルでセットアップする方法は？
ステップ1：プロジェクトディレクトリにcdし、package.jsonファイルを作成する
npm init
ステップ2：node-sassをインストールする
npm install node-sass --save-dev
ステップ3：scssファイルを作成する
mkdir sass
cd sass
touch main.scss
ステップ4：sassをcssにコンパイルする
npm run compile:sass
情報技術産業に関する多くの知識は、NALの長年の経験を持つSEの次の記事に掲載されます。読み続けてください。
