sassとcompass学習ノート2(compass)

9168 ワード
compss
compassを学ぶ前に、compassがcompassをどのように定義しているかを見てみましょう.
compassはオープンソースのCSS自動化処理フレームワークであり、前に述べたsassはless、stylusなどに類似したcssプリプロセッサである.compassには、sassとjqueryやjsと同様に、compassにカプセル化されたモジュールを使用すると、cssスタイルファイルの作成がより容易になります.
compassのインストールについては前にご紹介しましたが、compassには現在7つのモジュールが含まれています
  • Reset:ブラウザスタイルのリセット
  • CSS 3:css 3をサポートするコマンドサポート
    • を提供する.
  • Layout:ページレイアウトモジュール
    • を提供
  • Helpers:一連のヘルプ関数
    • を提供
  • Typography:レイアウト機能を提供する
  • Utilitie:他のモジュールに属さない機能を提供する
  • Browser Support:ブラウザサポートを提供するモジュールは、これらのモジュールを使用する際に、事前に導入する必要があります.導入されたフォーマットは@import "compass"がすべて導入されてもよいし、@import "compass/reset"フォーマットが具体的なモジュールに導入されてもよい.以下、これらのモジュールについてそれぞれ具体的に紹介します.

    • 1 Resetモジュール


    Resetブラウザのデフォルトスタイルをリセット
    @import "compass/reset";

    インターネットから他のスタイルリセットモジュールをダウンロードしてnormalizeを紹介することもできます.cssモジュール、gitダウンロードアドレスnecolas.github.io/normalize.cssまたはコンソールに直接インストールすることもできます
    $gem install compass-normalize

    config.rbプロファイルにヘッダを追加
    require 'compass-normalize'

    使用時screen.cssがモジュールに導入
    @import "normalize";

    normalizeのコアスタイルモジュールは主にbase,html 5,links,typography,embeds,groups,forms,tablesなどがあり,使用時に単一モジュールを導入することもできる
    @import "normalize/base";

    Resetモジュールには、reset-tableのmixinのような多くのMixinも含まれています.
    @mixin reset-table {
  border-collapse: collapse;
  border-spacing: 0;
}

    その他のモジュールについては、公式サイトのドキュメントを参照してください.

    2 layoutモジュール


    ページ全体のレイアウトを指定します.一般的な使用率は高くありません.
    //            
@import "compass/layout/grid-background";
//         
@import "compass/layout/stretching";
//     footer     
@import "compass/layout/sticky-footer";

    2.1 stretch-fullモジュール

    .stretch-full{
    @include stretch();
}

    コンパイル生成css
    .stretch-full{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

    stretch内のパラメータも変更できます
    .stretch-full{
    @include stretch(5px, 5px, 5px, 5px);
}

    コンパイルによるcssファイルの生成
    .stretch-full{
    position: absolute;
    top: 5px;
    bottom: 5px;
    left: 5px;
    right: 5px;
}

    2.2 sticky footer


    このモジュールには特定のhtmlドキュメント構造が必要です
    //html  

    
    
        
    
            This is the main content area
        
    
        
    

    //scss
@include sticky-footer(40px);
    //css
#root {
  clear: both;
  min-height: 100%;
  height: auto !important;
  height: 100%;
  margin-bottom: -40px;
}
#root #root_footer {
  height: 40px;
}
#footer {
  clear: both;
  position: relative;
  height: 40px;
}

    ルートと下部の名前もカスタマイズできます
    @include stick-footer(30px, "#my-root", "#my-root-footer", "#my-footer");

    2.3 grid background


    上の例に基づいてグリッドバックグラウンドを追加
    #root{
    @include grid-background();
}

    3 CSS 3モジュール&Browser Supportモジュール


    css 3クロスブラウザのサポート、css 3の新しい特定border-radius、text-shadowなどを提供し、css 3を使用する際にbowser_を調整することが多い.supportモジュールのサポート

    3.1 box-shadow


    通常、自分で箱のエッジシャドウ効果を書くと
    box-shadow:1px 1px 3px 2px #eee;
-webkit-box-shadow: 1px 1px 3px 2px #eee;
-moz-box-shadow: 1px 1px 3px 2px #eee;

    各ブラウザのバージョンに対応するために、CSS 3を書くのはとても頭が痛くて、css 3モジュールで解決することができます
    //  CSS3  
@import "compass/css3";
div{
    @include box-shadow(1px 1px 3px 2px #eee);
}

    cssファイル
    div{
  -moz-box-shadow: 1px 1px 3px 2px #eee;
  -webkit-box-shadow: 1px 1px 3px 2px #eee;
  box-shadow: 1px 1px 3px 2px #eee;
}

    -mozモジュールが不要な場合はbrowserモジュールを呼び出し、必要なモジュールを変更できます.
    @import "compass/support";
browsers()
//compass   browsers()  ，         list
    //  sass debug  ，   debug  
@debug browsers();

    サポートされているブラウザは次のとおりです.
    //     chrome
$supported-browsers:chrome;
    //   webkit
  -webkit-box-shadow: 1px 1px 3px 2px #eee;
  box-shadow: 1px 1px 3px 2px #eee;

    また、ブラウザをサポートする最小バージョン番号を指定することもできます.
    $browser-minimum-versions:("ie": "8");

    3.2 opacity透明度の設定:

    .test-opacity{
    @include opacity(0.3);
}
    .test-opacity {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=30);
  opacity: 0.3;
}

    3.3 border-radius

    //         5px，@include      mixin
.rounded{
    @include border-radius(5px);
}

    コンパイル後css
    .rounded {
　　　　-moz-border-radius: 5px;
　　　　-webkit-border-radius: 5px;
　　　　-o-border-radius: 5px;
　　　　-ms-border-radius: 5px;
　　　　-khtml-border-radius: 5px;
　　　　border-radius: 5px;
　　}

    4 Typographyモジュール


    主にテキストスタイル、リンクスタイルなどを修飾するのに使われます

    4.1 links

    //    
@import "compass/typography/links";
a{
    @include hover-link();
}

    cssファイル
    a {
  text-decoration: none;
}
a:hover, a:focus {
  text-decoration: underline;
}

    4.2 link-color

    //             
a{
    @include link-colors(#00c, #0cc, #c0c, #ccc, #cc0);
}
    //      
a {
  color: #00c;
}
a:visited {
  color: #ccc;
}
a:focus {
  color: #cc0;
}
a:hover {
  color: #0cc;
}
a:active {
  color: #c0c;
}

    4.3リストレイアウトリストの変更

    @import "compass/typography/lists";
.list-unstyled{
    @include no-bullets();
}

    cssファイル
    .list-unstyled {
  list-style: none;
}
.list-unstyled li {
  list-style-image: none;
  list-style-type: none;
  margin-left: 0;
}

    4.4 liの横レイアウトを実現する

    .list-inline{
    @include inline-list();
}
    .list-inline {
  list-style-type: none;
}
.list-inline, .list-inline li {
  margin: 0;
  padding: 0;
  display: inline;
}

    4.5 Text


    1. force-wrap 
    @import "compass/typography/text";
.text-force-wrap{
    @include force-wrap();
}
----------
.text-force-wrap {
  white-space: pre;
  white-space: pre-wrap;
  white-space: pre-line;
  white-space: -pre-wrap;
  white-space: -o-pre-wrap;
  white-space: -moz-pre-wrap;
  white-space: -hp-pre-wrap;
  word-wrap: break-word;
}

    2. nowrap 
    .text-nowrap{
    @include nowrap();
}
----------
.text-nowrap {
  white-space: nowrap;
}

    3.Ellipsis QQ群検索に類似している場合、文字が容器の幅を超え、後ろに省略記号、hoverを使用した場合、具体的な情報ボックスが表示されます
    Textの下のellipsisを使用してellipsisプラグインをインストールする
    $ compass install compass/ellipsis

    プロジェクトディレクトリを表示し、stylesheetsの下にxmlフォルダとellipsisを1つ追加します.cssファイル
    $use-mozilla-ellipsis-binding: true;
.text-ellipsis{
    @include ellipsis();
}
    //        firefox
.text-ellipsis {
  white-space: nowrap;
  overflow: hidden;
  -ms-text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
  -moz-binding: url('/stylesheets/xml/ellipsis.xml#ellipsis');
}

    5 Utilities


    5.1 css sprites


    css sprites図の設定
    @import "compass/utilities/sprites";
@import "image/icon/*.png";

.myicon{
    width: 20px;
    height: 20px;
    @include all-icon-sprites;
}

    5.2 clearfix


    フローティングをクリアするのは、常に仕事をしなければならないことです.
    1.方法1
    @import "compass/utilities/general";
.clearfix{
    @include clearfix();
}
    //*zoom  ie6
.clearfix {
  overflow: hidden;
  *zoom: 1;
}

    2.方法2
    擬似クラスクリアフローティングの導入
    .clearfix{
    @include pie-clearfix();
}
    .clearfix {
  *zoom: 1;
}
//display: table   ie6
.clearfix:after {
  content: "";
  display: table;
  clear: both;
}

    3.方法3上記display: tableはie 6とうまく互換性がないため、ie 6をサポートする擬似クラスクリアフローティングを以下に導入する
    .clearfix{
    @include legacy-pie-clearfix();
}
    .clearfix {
  *zoom: 1;
}
.clearfix:after {
  content: "\0020";
  display: block;
  height: 0;
  clear: both;
  overflow: hidden;
  visibility: hidden;
}

    5.3 float


    互換性ie 6におけるmarginによるフローティング2倍のエッジ距離の除去
    @import "compass/utilities/general/float"

    普段は
    .pull-left{
    float: left;
    display: inline;
}

    float mixinの導入
    .pull-left{
    @include float(left);
}
    //   css     display: inline;
.pull-left {
  float: left;
}

    上のコンパイルで生成されたcssコードにはdisplay:inlineはありません.ここではブラウザの最低バージョンを設定する必要があります.
    $browser-minimum-version:("ie", "6");

    完了
    [TOC]
    ASP.NETによるワンポイント登録(SSO)は、さまざまな場合に適しています
    Webフロントエンド-css