SASS_html/css_WEB-ITnose を書くためのヒント

変数の名前付けの改善

変数は Sass の最も単純な機能の 1 つですが、場合によっては不適切に使用される可能性があります。サイト全体のセマンティック変数を作成することが不可欠です。適切な名前が付けられていないと、理解や再利用が困難になります。

参考までに、変数に名前を付ける際のヒントをいくつか示します:

変数に名前を付けるときは曖昧にしないでください

命名規則 (モジュラー、BEM など) に固執してください

変数の使用が意味のあるものであることを確認してください

これ良い例を次に示します:

$orange: #ffa600; $grey: #f3f3f3; $blue: #82d2e5;$link-primary: $orange;$link-secondary: $blue;$link-tertiary: $grey;$radius-button: 5px;$radius-tab: 5px;

これは悪い例です:

$link: #ffa600;$listStyle: none;$radius: 5px;

Mixins の使用を減らす

Mixins は、サイト内で複数回使用できるコード ブロックを実装する優れた方法です。使用回数。ただし、@include で定義されたミックスインは、CSS コードにコピーして貼り付けることと何ら変わりません。 CSS コードで重複コードが大量に生成され、ファイルがますます肥大化します。

これまでのところ、ミックスインは、パラメーターを渡してスタイルをすばやく作成する必要がある状況にのみ適しています。

例:

@mixin rounded-corner($arc) {    -moz-border-radius: $arc;    -webkit-border-radius: $arc;    border-radius: $arc;  }

角丸ミックスインはどのような状況でも使用できます。パラメーター $arc の値を変更するだけで、異なるコードが得られます:

.tab-button {     @include rounded-corner(5px); }.cta-button {     @include rounded-corner(8px); }

次のような Mixins を賢く使用してください:

@mixin cta-button {    padding: 10px;    color: #fff;    background-color: red;    font-size: 14px;    width: 150px;    margin: 5px 0;    text-align: center;    display: block;}

この Mixins はパラメータを渡しません。次のポイントである %placeholder を使用して作成することをお勧めします。

プレースホルダーを活用する

Mixins とは異なり、%placeholder は重複したコードを生成することなく複数回使用することもできます。これにより、入力 CSS がより使いやすく、クリーンになります。

%bg-image {    width: 100%;    background-position: center center;    background-size: cover;    background-repeat: no-repeat;}.image-one {    @extend %bg-image;    background-image:url(/img/image-one.jpg");}.image-two {    @extend %bg-image;    background-image:url(/img/image-two.jpg");}

コンパイルされた CSS:

.image-one, .image-two {    width: 100%;    background-position: center center;    background-size: cover;    background-repeat: no-repeat;}.image-one {    background-image:url(/img/image-one.jpg") ;}.image-two {    background-image:url(/img/image-two.jpg") ;}

複数のセレクターが同じ %placeholder を使用する場合、コードは 1 回だけ出力されます。参照のない %placeholder は CSS コードを出力しません。

以前の Mixin と一緒に使用すると、Mixins の柔軟性を維持できるだけでなく、コードをシンプルかつクリーンに保つことができます。

れーい