ほんの数語で Sass を始めましょう-htmlチュートリアル-php.cn

ほんの数語で Sass を始めましょう

WBOY

リリース： 2016-09-05 08:45:32

オリジナル

1076 人が閲覧しました

背景:

会社のプロジェクトを引き継ぐのは初めてです。以前、sass の基礎知識を簡単に読んだことがありますが、長い間取り組んでいなかったため、知識が長らく散乱していました。今から復習します。それを書き、常識の重要なポイントをいくつか書き留めます。。 Sass は Ruby で書かれているため、使用する前に、マシンに Ruby 開発環境があることを確認してください。cmd で ruby -v コマンドを使用して、現在の Ruby バージョンを確認してください。

紹介と概要:

Sass は、CSS の 前処理ツール であり、CSS コードが大きい場合、開発を簡素化し、その後のメンテナンスを容易にすることができます。前処理ツールとは何ですか? 簡単に理解すると、実際の CSS コードを生成する前に実行する作業です。これには、CSS 記述の効率を向上させるためにいくつかの高級言語機能が組み込まれており、sass は css3 もサポートしています。

C言語の前処理を覚えていますか？ C 言語には多くの種類の前処理がありますが、その中で最も知られていないのは「マクロ定義」です。マクロ定義の機能は、事前に設定された定数を定義し、この定数を使用して、この定数が含まれるコードのすべての部分を前処理することです。設定値を置き換えます (例:

#define A 5
)。これは、次のコードにあるすべての A を 5 に直接置き換えることを意味します。これらのタスクはコードがコンパイルされる前に実行する必要があるため、マクロ定義は事前に行われます。加工の一種。

上記に戻ると、コンパイルと分析を実行する前に、CSS コードをファイル接尾辞 css でファイルに記述する必要があることがわかります。sass は事前にコンパイルされたツールであるため、sass を使用する必要があると考えられます。 css が生成される前に実行されます。確かにその通りです。sass を記述するには 2 つの最も一般的な方法があります。それらは sass と scss という言語の文法に従います。 Ruby や Python など、言語の文法部分としてスペースを使用します。後者は、CSS で最も一般的な中括弧を文法サポートとして使用します。同じコード部分は次のとおりです

リーリー

2 つの構文を同じファイル内で混合することはできませんが、ツールを使用して相互に変換できることに注意してください。

よく使われるヒント:

1. クラス名のネスト

リーリー

2.変数

リーリー

3. 擬似クラス・擬似要素の書き方

リーリー

ここで注意すべき点は、疑似クラスと疑似要素の違いです。疑似要素は CSS3 でのみ登場した概念であり、2 つの:: で表されます。疑似クラスは、特定のセレクターに特殊効果を追加することを目的としています。一方、疑似要素は、特定のセレクターに特殊効果を追加することを目的としています。一般的な疑似クラスは、これら 4 つの疑似要素の記述順序に注意する必要があることに注意してください。クラスは同時に出現し、使用される必要があります。その記述順序は私のものと一致していなければなりません。そうでない場合、それは無効になります。 LVバッグをご存知ですか？彼は大丈夫ですか？うーん！ LVHA。。最初の文字を含む単語全体を覚えてください。言うまでもなく、after、before、first-letter、first-line などの一般的に使用される疑似要素があるため、セミコロンを複数個記述する場合と、複数の疑似要素を使用する場合の 2 つのポイントを誰もが知っておく必要があります。 -クラスは同時に順序を発行します。

4. コード再利用の継承

これを見て、誰もが上で書いた 2 番目の点を思い浮かべるはずです。変数の定義は特定の値を再利用するためのものです。コードの大部分を再利用したい場合はどうすればよいでしょうか。これから紹介する継承を利用することができます。 Sass の継承には、

@mixin/@include と @extend

という 2 つのキーワードのペアがあり、@mixin はコードブロックを定義し、@include は定義されたコードブロックを導入します。 @extend は、現在定義されているクラススタイルを紹介します。C 言語に精通している学生は、include が C 言語のマクロ定義の一種であることを知っています。したがって、When Sass がこのキーワードを解析するとき、これはコードコピーと同義であると理解できます。 , @extend がクラス内にある場合は、コードを直接コピーします。これは、現在のクラス名を継承するクラス名 (例では b の名前) に並べます。最終的な効果は .a、.b です。つまり、クラス a とクラス b の両方がこの属性を持ちます。継承はオブジェクト指向の概念であり、Sass では借用を意味します。それを所有する必要はなくなります。 Sass それは、コードを繰り返し参照するためによく使用されます。一昨日、この製品から、検索ボックスをクリックすると、新しい検索ページにジャンプして検索できるとのことです。ホームページの検索ボックス、フォントの色だけが違うのですが、現時点でCSSの両方の部分を書き直す必要がありますか？賢い子供は、最初の部分を継承して、別の部分を書き直すことを考えました。

リーリー

php の include などのキーワードもあります。フロントエンドの学生は、php の include と require の違いなど、関連情報を参照して知識を補うことができます。

5. コメント

sass中的注释有两种，一种是我们在css中使用的/**/，一种是//注释，前者在编码阶段和编译后的阶段都会被保留，而后者只存在于编码阶段，也就是给程序看的咯~

6.文件定义

sass中的文件定义也很简单，我们只需要知道一点就可以，以_开头的文件名不会被sass编译器编译成css文件，所以他有个见名知意的名字叫 局部文件 而以_下开头的文件中通常会被用作定义一些全部变量，如字体大小颜色等，至少我这个项目是这样做的，如_var.scss文件他的存在形式只会有一种，就是scss后缀结尾的文件，而aa.scss这样的文件，经过sass编译器就会被编译为css文件，我们知道浏览器的渲染引擎只认css文件。不过此刻问题又来了，那_var.scss该怎么使用呢？

7.sass中的import和css中import的区别

_var.scss文件既然不会被编译为css文件，那就意味着他没有办法被浏览器解析，上文也提到过通常使用他来声明一些变量，那么这些变量将怎么被主文件引用呢？这里我们依旧使用的是css中就有的一个关键字@import指令，只是sass中的对这个指令进行的了一定的增强，这里需要大家明确一点，在sass中 *_var和var代表同一个文件* ，所以当引入_var这个文件的时候，只需要写var即可，sass中使用@import引入sass文件的时候只需要写上文件名而不需要后缀，这点就和node中使用require引入一个模块是类似的，例如@import "var",这里大家可能会有疑问怎么使用这个指令来引入曾经的css文件，其实我们上边已经说过@import是sass对css中同名指令的增强，所以当sass判断到@import指令后面出现后缀名、url函数、http等关键字时就会认为你使用的是css中原生的@import指令。

关于css中@import的最佳实践，在性能优化方面并不提倡大家在css中经常使用@import指令，我们知道当浏览器引擎拿到一个网页文件的时候是先生成dom树，其次构建渲染树进行渲染，而@import是内嵌在css中的，也就是他会比link标签中的css代码晚一步执行，所以使用这个指令会造成页面的卡顿留白。

8.属性的连写拆分

在css中有个称之为属性连写的概念，如padding：5px，其实我们也可以分写成padding-left、padding-right等，可见这样分写冗余了一个padding关键字，那在sass中要怎样等价替换呢？
<code>css代码
.a{
    padding-left:2px;
    padding-right:2px;
}

sass代码
.a{
    padding{
        left:2px;
        right:2px;
    }
}
</code>
ログイン後にコピー
9.其他

以上知识sass中最为简单常用的一部分，也是作为一个刚入门的新手必然要掌握的一部分内容，关于sass的其他技巧如可以进行带单位的计算、@if、@at-root等指令如若需要大家可以查阅相关的资料加以补充。