Help us understand the problem. What is going on with this article?

Sass(SASS記法)ってなんのSaっ!!

More than 1 year has passed since last update.

コツコツ書いていきます。

参考サイト

良いブログ↓

おさらい

. => class
# => id

サンプルコード

sample.js
<style lang="sass">
= basic-font($font-size: 1.0rem)
  color: rgb(0, 39, 99)
  font-size: $font-size
  font-family: 'Roboto Condensed script=all rev=1', 'Adobe Blank'

.text-purple
  font-style: italic
  margin-bottom: 0.5rem
  font-weight: 900
  line-height: 1.5
  +base-font(2.5)

.text-note
  +base-font(1.0)

<style>

よく使う記法

【メリット】

  • 何度でも繰り返し使うことができる

  • Mixin

= メソッド名($引数)
  • Include
+ ミックスイン名($引数)
  • 引数の使用
sample.js
= basic-font($font-size)
  font-size: $font-size + rem
  • Default値の設定
sample.js
= basic-font($font-size: 1.0rem)
  font-size: $font-size
  • unquate

  • 複数引数

スコープ

  • 上から読み込まれる
  • グローバル変数とローカル変数

注意点

  • セレクターの中で、定義したミックスインは同じセレクター内でしか使えない
  • スコープかなり重要
  • 引数
  • 色の関数も
.navbar-title {
  color: #fff;
  font-family: 'Dosis', sans-serif;
  font-weight: 600;
}

.navbar {
  background-color: #2f4a5b;
  padding-bottom: 0px;
}

.nav-tabs {
  border-bottom: 0px;
  margin-top: 15px;
}

.nav-link,
.nav-link:hover,
.nav-link:focus {
  color: #fff;
  font-size: 14px;
  background-color: #2f4a5b;
  border-color: #2f4a5b;
  padding-top: 5px;
  padding-bottom: 8px;
  padding-left: 50px;
  padding-right: 50px;
}

.nav-link.active {
  color: #3a407c;
  font-size: 14px;
  background-color: #e6eff5;
  border-color: #e6eff5;
  padding-top: 5px;
  padding-bottom: 10px;
  padding-left: 50px;
  padding-right: 50px;
}

.nav-tabs .nav-link.active {
  background-color: #e6eff5;
  border-bottom: 0px;
}

こうなる

.navbar-title
  color: #fff
  font-family: 'Dosis', sans-serif
  font-weight: 600

.navbar
  background-color: #2f4a5b
  padding-bottom: 0px

.nav-tabs
  border-bottom: 0px
  margin-top: 15px

.nav-link
  color: #fff
  font-size: 14px
  background-color: #2f4a5b
  border-color: #2f4a5b
  padding-top: 5px
  padding-bottom: 8px
  padding-left: 50px
  padding-right: 50px
  &:hover, &:focus
    color: #fff
    font-size: 14px
    background-color: #2f4a5b
    border-color: #2f4a5b
    padding-top: 5px
    padding-bottom: 8px
    padding-left: 50px
    padding-right: 50px
  &.active
    color: #3a407c
    font-size: 14px
    background-color: #e6eff5
    border-color: #e6eff5
    padding-top: 5px
    padding-bottom: 10px
    padding-left: 50px
    padding-right: 50px

.nav-tabs .nav-link.active
  background-color: #e6eff5
  border-bottom: 0px
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away