ホームページ >ウェブフロントエンド >htmlチュートリアル >CSS SASS スタイルの使用方法
CSS SASS スタイルの使用方法
- php中世界最好的语言オリジナル
- 2018-01-25 11:24:132111ブラウズ
今回は、SASS スタイルの CSS の使い方と、SASS スタイルの CSS を使用する際の注意事項を紹介します。以下は実際的なケースです。
SASS を使用する開発者が増えるにつれて、SASS コードの数に注意を払う必要があります。 CSS (カスケード スタイル シート) の構文から始めて、SASS 構文の特殊な機能のいくつかを説明します。結局のところ、CSS スタイル ガイドは非常に一般的です。
この記事では主に私が個人的に興味のあるいくつかの機能を紹介します。これらの機能から恩恵を受けて、独自の SASS 使用ガイドを作成できるかもしれません。
一般的に使用される独自の CSS 書式設定ルールとスタイル ガイドを引き続き維持してください
この記事では、SASS に関するいくつかのコンテンツについて説明することに重点を置いていますが、これに基づいて、開発者は既存の適切な書式設定ルールを維持する必要があります。独自の書式設定ルールをまだ作成していない場合は、独自の CSS 記述習慣を身に付けるのに役立ついくつかのスタイル ガイドを確認してください。含まれる内容のほんの一部を以下に示します:
1. 行のインデントを一貫して保ちます
2. コロン/中括弧の前後のスペースの数を一貫して保ちます
3. 1 行に 1 つのセレクターと 1 行に 1 つのルールを維持します 4. 関連することを試してください属性を一緒に書きます
5. クラス名の命名規則を計画します
6. CSS
id セレクターの使用を避ける 7. お待ちください
最初に @extend(s) をリストします
.weather {
@extends %module;
...
} これにより、開発者は明確なアイデアを維持し、このクラスとその属性、および他のクラスとその属性の関係を即座に把握し、属性の一貫性を維持できます。属性の再利用に関する明確なアイデア。 通常のスタイル
.weather {
@extends %module;
background: LightCyan;
..
}
@include(s)
.weather {
@extends %module;
background: LightCyan;
@include transition(all 0.3s ease-out);
...
}これにより、開発者は @extend(s) と @include(s) のデプロイメントを一目で確認でき、自分自身や他の開発者がコードを解釈しやすくなります。場合によっては、カスタム @include とパブリック ソース @include を区別するかどうかを決定することもできます (特にコードの再利用性と適時性を考慮して) セレクターのネスト
.weather {
@extends %module;
background: LightCyan;
@include transition(all 0.3s ease);
> h3 {
border-bottom: 1px solid white;
@include transform(rotate(90deg));
}
｝ ネストセクションでは、上記のスタイルルールを引き続き使用します。ネストされた部分は常に最後に来る必要があります。 すべてのベンダープレフィックスには @mixins を使用してください
しかし、一部のベンダー プレフィックスの私有化が非常に深刻な場合、これらのプレフィックスを標準化することは非常に困難になり、他のプレフィックスやプレフィックスのないバージョンを適用する価値はなくなり、これらのベンダー プレフィックスの @mixin を放棄することを選択します。たとえば、-webkit-line-clamp、-mscontent-zoom-chaining、または同様の状況です。
ネストレベルは 3 レベルを超えてはなりません
.weather {
.<span style="width: auto; height: auto; float: none;" id="14_nwp"><a style="text-decoration: none;" mpid="14" target="_blank" href="http://cpro.baidu.com/cpro/ui/uijs.php?adclass=0&app_id=0&c=news&cf=1001&ch=0&di=128&fv=0&is_app=0&jk=be9ebff1476c47c4&k=cities&k0=cities&kdi0=0&luki=6&n=10&p=baidu&q=06011078_cpr&rb=0&rs=1&seller_id=1&sid=c4476c47f1bf9ebe&ssp2=1&stid=0&t=tpclicked3_hc&tu=u1922429&u=http%3A%2F%2Fwww%2Eadmin10000%2Ecom%2Fdocument%2F2137%2Ehtml&urlid=0" id="14_nwl"><span style="color:#0000ff;font-size:14px;width:auto;height:auto;float:none;">cities</span></a></span> {
li {
// no more!
}
}
} 3 回以上ネストすると、不正な (悪い?) セレクターを作成する可能性があります。不正行為の理由としては、このセレクターがHTMLの構造に依存しすぎている（不安定）、詳細すぎる（機能が強力すぎて柔軟性がない）、再利用性が低すぎる（あまり使いにくい）などが挙げられます。同時に、ネストレベルが多すぎると、コードが難解で理解しにくくなる可能性が高くなります。 クラスに関連するコードが本当に多すぎる場合があるため、.weather
> h3 {
@extend %line-under;
}
}ネストされたコードは 50 行を超えてはなりません SASS でのネストが 50 行を超えると、コンパイラーの 1 ページに完全に表示されなくなる可能性があり、コードが読みにくくなり、わかりにくくなります。理解すること。ネストは本来、思考とコードの編成を容易にし、簡素化することを目的としています。可読性を損なう場合は、ネストしないでください。 グローバルおよびリージョナルのSASSファイルシーケンスは、テーブルコンテンツに相当します
/* Vendor Dependencies */
@import "compass";
/* Authored Dependencies */
@import "<span style="width: auto; height: auto; float: none;" id="10_nwp"><a style="text-decoration: none;" mpid="10" target="_blank" href="http://cpro.baidu.com/cpro/ui/uijs.php?adclass=0&app_id=0&c=news&cf=1001&ch=0&di=128&fv=0&is_app=0&jk=be9ebff1476c47c4&k=global&k0=global&kdi0=0&luki=9&n=10&p=baidu&q=06011078_cpr&rb=0&rs=1&seller_id=1&sid=c4476c47f1bf9ebe&ssp2=1&stid=0&t=tpclicked3_hc&tu=u1922429&u=http%3A%2F%2Fwww%2Eadmin10000%2Ecom%2Fdocument%2F2137%2Ehtml&urlid=0" id="10_nwl"><span style="color:#0000ff;font-size:14px;width:auto;height:auto;float:none;">global</span></a></span>/colors";
@import "global/mixins";
/* Patterns */
@import "global/tabs";
@import "global/modals";
/* Sections */
@import "global/header";
@import "global/footer"; これらのファイルはコンパスのようなもので、カラーとミックスインはコンパイルされた CSS コードを生成せず、純粋に独立したライブラリです。その後、特異性の競合なしに書き換えをより安全にするためのパターンが導入されました。 SASS を複数の小さなファイルに合理的に分割します
这样做没有任何不好。在情况允许的时候，尽量使用小而精的多个文件，这样便于开发者在寻找一些特定文件，而不是在几个拥有冗长代码的大文件中大海捞针。
... @import "<span style="width: auto; height: auto; float: none;" id="9_nwp"><a style="text-decoration: none;" mpid="9" target="_blank" href="http://cpro.baidu.com/cpro/ui/uijs.php?adclass=0&app_id=0&c=news&cf=1001&ch=0&di=128&fv=0&is_app=0&jk=be9ebff1476c47c4&k=global&k0=global&kdi0=0&luki=9&n=10&p=baidu&q=06011078_cpr&rb=0&rs=1&seller_id=1&sid=c4476c47f1bf9ebe&ssp2=1&stid=0&t=tpclicked3_hc&tu=u1922429&u=http%3A%2F%2Fwww%2Eadmin10000%2Ecom%2Fdocument%2F2137%2Ehtml&urlid=0" id="9_nwl"><span style="color:#0000ff;font-size:14px;width:auto;height:auto;float:none;">global</span></a></span>/header/header/"; @import "global/header/logo/"; @import "global/header/dropdowns/"; @import "global/header/nav/"; @import "global/header/really-specific-thingy/";
我经常做的就是在一个全局scss文件中逐个引用这些文件，而不是引用一个_header.scss文件，然后再_header.scss文件中在逐个引用。这样做能够降低索引的时间和提高阅读效率。
当这些文件过多导致import序列太长时，你可能会用到 Globbing 。
记得将Partials命名为_partial.scss
这是一个常见对于不能自身编译的文件的命名。这样的文件多少会依赖于其他的文件，使得自身不能独立完成编译。我个人喜欢在文件名之前添加一个下划线，譬如_dropdown-menu.scss
在本地编译时添加行映射
看这里，这意味着开发工具能够告诉你每一条规则的来源，哪怕是一个被引入的partial文件。
在部署时，记得编译已精简的文件
运行中的网页永远都只需要使用精简的CSS。
无需递交.css文件
这可能要花些时间，但是不在文件库中放入.css文件可以是一件非常美妙的事. 文件编译在部署的时候就完成了。 所以唯一可以看见的是那些已经精简的格式美妙的sass文件。 这使得对于文件的描述变得大有用途。文件描述是用于对比由版本发布者所做的一些更改。而对于已经精简的.css文件，文件描述基本不需要了。
大方的使用注释
很少有人会后悔在代码中留下了注释。不论是有用的还是不起眼的注释，他们最终都会在编译成精简的CSS文件时被抹去，对于开发者来说不会有任何附加代价。
.overlay {
/* modals are 6000, saving messages are 5500, header is 2000 */
z-index: 5000;
} 提到注释，你可能也需要对它做一些标准化的调整。在SASS中，’//’非常适用于添加注释，’//’使得注释和取消注释变得非常方便。
将一些常用的数值和有特殊意义的数值转化成变量
如果你发现自己重复使用一个数值（这在前端设计里是很常见的），你最好将它转化成一个变量。这样你可以通过命名来提醒自己这个数值的含义，并且在编写代码时保持一致性，是的你在更改这个数值时不需要逐行调整。
若果一个数字有着明显的含义，那么将它转化成变量是必不可少的啦。
相信看了这些案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！
相关阅读：
以上がCSS SASS スタイルの使用方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。