CSSへの変換

私のSASSスキルをフレックスして練習するための運動として、最近、私は自分のプロジェクトのうちの1つのCSSをSASSに変換しました.このプロジェクトは、変換を必要としましたか?ええ、たぶん.私は1つのスタイルシートを使用しており、それは300行未満ですが、より小さいスタイルシートを変換する大きなプロジェクトのための素晴らしい練習です.

始める
私のyellowbitroadアプリケーションはRails 6を実行しているので、Sass Rail GemはRailsで出荷されました.
私はすべてのCSSをアプリケーションにダンプしました.CSSsassへの変換を開始するには、新しいスタイルシート/アプリ/資産/スタイルシート/スタイルを作成しました.SCSSすべてのスタイルシートアプリケーション/資産/スタイルシートに含まれてコンパイルされ、あなたのアプリケーションで使用されます.
Railsアプリケーションでは、アプリケーションの上部にコメントが表示されます.スタイルシートの使い方を説明するCSS.また、あなたのCSSを分割する提案を参照してください.scssファイルは、rails g model コマンド.私の目的では、そのような小さなファイルを分割するのは意味がありません.ですから、すべてのスタイルシートにすべてを置くつもりです.

カラーパレット
私にとって、Sassについての最も便利なことの一つは、覚えていなければならない、ルックアップ、コピーおよび/または貼り付け16進コードです.また、どのような色を知っていますか?多分、あなたはします、しかし、私には手がかりがありません.私は私のアプリケーションのカラーパレットを選ぶのが大好き、私は16進数やRGBのコードを覚えているか、彼らが表す色を好きではない.
変換の最初のステップは、変数としてすべてのテーマ色を保存し、それらの変数をスタイルシートを通して実装することでした.
以前に

nav, footer{
  background: #04724D; 
  height: 70px;
  width: 100%;
}
a {
  color: #04724D; 
  font-weight:bold;
}

後に

$dark_green: #04724D; 
$light_green:  #16DB65;
$yellow: #FFD23F;
$red: #B80c09;
$light_blue:  #01BAEF;

 body {margin: 0;}
 nav, footer{
   background: $dark_green; 
   height: 70px;
   width: 100%;
 }
 a {
  color: $dark_green; 
  font-weight:bold;
}

ああ!それは非常に簡単でした、そして、現在、私は私が望むならば、私の全体のカラーパレットを変えることに決めることができます.また、私は、より多くのCSSを書くとき、私は前のスタイル規則を参照しておく必要はありません.
あなたが完全にあなたのテーマ色を変える良い機会があるならば、あなたはより多くの一般的な変数名(例えばmainMain色、$ SecondaryRadiesなど)を選ぶことを望むかもしれません.

営巣
次に、私は私の別々のスタイル規則をネスティングすることに取り組みました.私のプロジェクトのために、これは私のnavとフッター要素のために多くの感覚を作りました.
どこでも、私はNAVまたはフッター(私がそれらの親要素を参照したので、本当に私のCSSで明らかに)の子供要素のために規則を持ちました.私はまた、親要素を参照していなかったが、子供のためにIDを使用したいくつかの規則を生成する機会を使用しました.
以前:CSS

nav, footer{
  background: #04724D; 
  height: 70px;
  width: 100%;
}
nav { 
  position:fixed; 
  top: 0; }
nav ul {
  text-align:right; 
  margin: 0 auto; 
  width:85%;
}
nav ul li {
  display:inline-block; 
  margin-right:25px; 
  line-height:70px;
}
nav a, footer input {
  color:white; 
  text-decoration: none; 
  font-family: 'Roboto Slab', arial, sans-serif;  
  font-size:20px; margin-bottom: 10px;
}
nav a:hover{
  border-bottom: 1px solid white;
}
footer {
    padding-top: 20px;
    padding-left: 20px
  }
footer input {
    color: white;
    border: none;
    background: none;
}
#branding{
  color: #fff;
  display: inline-block;
  float:left;
  line-height: 70px;
}
#nav-items {
  width:85%;
  margin: 0 auto;;
}

アフタース

nav { 
    position:fixed; 
    top: 0; 
    background: $dark_green; 
    height: 70px;
    width: 100%;
    ul {
        text-align:right; 
        margin: 0 auto; 
        width:85%;
        li {
            display:inline-block; 
            margin-right:25px; 
            line-height:70px;
        }

    }
    a {
        color:white; 
        text-decoration: none; 
        font-family: 'Roboto Slab', arial, sans-serif;  
        font-size:20px; 
        margin-bottom: 10px;
    }
    a:hover{
        border-bottom: 1px solid white;
    }
    #nav-items {
        width:85%;
        margin: 0 auto;
    }
    #branding{
        color: #fff;
        float:left;
        line-height: 70px;
    } 
}
 footer {
     padding-top: 20px;
     padding-left: 20px;
     background: $dark_green; 
     height: 70px;
     width: 100%;
     input {
        color: white;
        border: none;
        background: none;
        text-decoration: none; 
        font-family: 'Roboto Slab', arial, sans-serif;  
        font-size:20px; 
        margin-bottom: 10px;
    }
   }

今、我々はここでいくつかのスタイルを繰り返す必要がありました、外フッターとNavネストされた規則で、しかし、私はそれで大丈夫です.それはマイナーです、そして、現在、私は視覚的にこれらの2つの親要素と彼らの子供に影響を及ぼすすべてのスタイル規則を見ることができます.
より小さいCSSファイルをsassに変換することは、すばらしい実行です.あなたは、Sass、CSSまたは両方を使いますか?あなたは1つのCSSから大規模なプロジェクトをSassに変換したことがありますか?私に知らせて!