css preprocessor

.scss

.css

(compile)

Why to use SASS

.text-box {
    font-family: sans-serif;
}
h1.title {
    text-decoration: underline;
}
h1.title > span {
    color: #666;
    font-style: italic;
}
.text {
    font-family: serif;
}
.text > span.strike {
    text-decoration: line-through;
}
.text > span.italic {
    font-style: italic;

    color: #ff0000;

}

.text-box {
    font-family: sans-serif;
    .title {
        text-decoration: underline;
        span {
            color: #666;
            font-style: italic;
        }
    }
    .text {
        font-family: serif;
        .strike {

             text-decoration: line-through;

        }
        .italic {

            font-style: italic;

            color: #ff0000; }
    }
}

.css

.scss

Variables

.scss

$font-sawasdee: Sawasdee;
$font-purisa: Purisa;
$color-salmon: #FA8072;
$color-blue: #9999FF;
.content-box {
    border: 1px solid;
    width: 100px;
    height: 50px;
    margin: 0px 45px;
    padding: 15px 0px;
    &.-title {
        font-family: $font-stack;
        background-color: $color-salmon;
    }
    &.-content {
        font-family: $font-purisa;
        background-color: $color-blue;
    }
}

.css

.content-box {
  border: 1px solid;
  width: 100px;
  height: 50px;
  margin: 0px 45px;
  padding: 15px 0px; }
  .content-box.-title {
    font-family: Sawasdee;
    background-color: #FA8072; }
  .content-box.-content {
    font-family: Purisa;
    background-color: #9999FF; }

HTML

<p class="content-box -content">
    CONTENT
</p>

HTML

<p class="content-box -title">
    TITLE
</p>

Nesting

.scss

.navbar-top {
    width: 100%;
    height: 50px;
    background-color: #9999FF;
    >.navbar {
        height: 40px;
        width: auto;
        list-style: none;
        position: relative;
        .linknav {
            color: #fff;
            float: left;
            width: 100px;
            height: 50px;
            list-style: none;         
            &.-linkhover:hover {
                background-color: #FA8072;
            }
        }
    }
}

.css

.navbar-top {
  width: 100%;
  height: 50px;
  background-color: #9999FF; }
  .navbar-top > .navbar {
    height: 40px;
    width: auto;
    list-style: none;
    position: relative; }
    .navbar-top > .navbar .linknav {
      color: #fff;
      float: left;
      width: 100px;
      height: 50px;
      list-style: none;
      }
      .navbar-top > .navbar .linknav.-linkhover:hover {
        background-color: #FA8072; }

HTML

<div class="navbar-top">
       <ul class="navbar _center">
              <li class="linknav -linkhover">Home</li>
              <li class="linknav -linkhover">News</li>
              <li class="linknav -linkhover">Contact</li>
              <li class="linknav -linkhover">About</li>
      </ul>
</div>

Import

_variables.scss

$font-stack: Roboto;
$text-size: 15px;
$text-white: #fff;

.text-style {
    font-family: $font-stack;
    font-size: $text-size;
    font-color: $text-white;
}

.scss

@import 'variables'; /* importมาจากไฟล์ _variables.scss */
.navbar-top {
    width: 100%;
    height: 50px;
    background-color: #9999FF;
    >.navbar {
        height: 40px;
        width: auto;
        list-style: none;
        position: relative;
        .linknav {
            font-family: $font-stack;
            font-size: $text-size;
            font-color: $text-white;
            float: left;
            width: 100px;
            height: 50px;
            list-style: none;         
            &.-linkhover:hover {
                background-color: #FA8072;
            }
        }
    }
}

.css

.text-style {
  font-family: Roboto;
  font-size: 15px;
  font-color: #fff; }

/* importมาจากไฟล์ _variables.scss */
.navbar-top {
  width: 100%;
  height: 50px;
  background-color: #9999FF; }
  .navbar-top > .navbar {
    height: 40px;
    width: auto;
    list-style: none;
    position: relative; }
    .navbar-top > .navbar .linknav {
      font-family: Roboto;
      font-size: 15px;
      font-color: #fff;
      float: left;
      width: 100px;
      height: 50px;
      list-style: none;
      }
      .navbar-top > .navbar .linknav.-linkhover:hover {
        background-color: #FA8072; }

.-linkhover:hover {
        background-color: #FA8072; }

Mixins

.css

.heading {
    font-size: 22px;
    font-weight: bold;
    font-family: Tahoma;
}
.title {
    font-size: 22px;
    font-weight: bold;
    font-family: Tahoma;
}

HTML

<div class="heading">

     HEAD

</div>
 

<div class="title">

     TITLE

</div>

.scss

@mixin text-style {
    font-size: 22px;
    font-weight: bold;
    font-family: Tahoma;
}

.heading {
    @include text-style;
}
.title {
    @include text-style;
}

 

.css

.heading {
    font-size: 22px;
    font-weight: bold;
    font-family: Tahoma;
}
.title {
    font-size: 22px;
    font-weight: bold;
    font-family: Tahoma;
}

.scss

@mixin text-style($size | $size: 14px) {
    font-size: $size;
    font-weight: bold;
    font-family: Tahoma;
}

.heading {
    @include text-style(22px);
}
.title {
    @include text-style($size);
}

 

.css

.heading {
    font-size: 22px;
    font-weight: bold;
    font-family: Tahoma;
}
.title {
    font-size: 14px;
    font-weight: bold;
    font-family: Tahoma;
}

Extends

.scss

.button-salmon {
    width: 80px;
    height: 50px;
    background-color: #FA8072;
    border: none;
    color: white;
    margin: 5px 25px;
}
.button-blue {                
    @extend .button-salmon; /* .button-blue extend มาจาก .button-salmon */
    background-color: #9999FF;
}

 

.css

 .button-salmon, .button-blue {
   width: 80px;
   height: 50px;
   background-color: #FA8072;
   border: none;
   color: white;
   margin: 5px 25px; }

.button-blue {
   /* .button-blue extend มาจาก .button-salmon */
   background-color: #9999FF; }

Operators

.container-box {

     width: 100%

}

article {

     width: 62.5%

}

aside {

    width: 31.25%

}

.scss

.container-box {
    width: 100%;
    height: 200px;
    border: 1px solid #9999FF;
}
article {
    width: 600px / 960px * 100%; /* px | pt | % */
    border: 1px solid #FA8072;
    height: 100px;
}
aside {
    width: 300px / 960px * 100%; /* px | pt | % */
    border: 1px solid #CD9B9B;
    height: 50px;
}

 

.css

.container-box {
  width: 100%;
  height: 200px;
  border: 1px solid #9999FF; }

article {
  width: 62.5%;
  border: 1px solid #FA8072;
  height: 100px; }

aside {
  width: 31.25%;
  border: 1px solid #CD9B9B;
  height: 50px; }

 

.scss

@mixin width-box($width: 100%)

.container-box {
    width: $width;
    height: 200px;
    border: 1px solid #9999FF;
}
article {
    width: 600px / 960px * $width; /* px | pt | % */
    border: 1px solid #FA8072;
    height: 100px;
}
aside {
    width: 300px / 960px * $width; /* px | pt | % */
    border: 1px solid #CD9B9B;
    height: 50px;
}

 

.css

.container-box {
  width: 100%;
  height: 200px;
  border: 1px solid #9999FF; }

article {
  width: 62.5%;
  border: 1px solid #FA8072;
  height: 100px; }

aside {
  width: 31.25%;
  border: 1px solid #CD9B9B;
  height: 50px; }

 

R  SCSS

.box1 {

     width: 100px;

     height: 100px;

     .box2 {

          width: 100px;

          height: 100px;

     }

}

.home__banner__button { /* style */ }

.home__banner__button--red { /* style */ }

.home__banner__button--is-active { /* style */ }

<button type="button" class="btn btn-primary btn-lg">submit</button>

Naming class

Naming BEM

Naming Bootstrap

Components

1 component

1 component

1 component

Naming components

.scss

.profile-box {
        >.name {
            color: #9999FF;
        }
        >.field {
            padding: 5px;
            display: block;
            border: none;
            border-bottom: 1px solid #F5F5F5;
            width: 97%;
        }
        >.submit {
            background-color: #9999FF;
            border: none;
            color: white;
            padding: 2px 10px;
        }
}

Elements

elements คือส่วนที่อยู่ภายใน component

element .name

element .field

element .submit

Naming elements

.scss

.profile-box {

        >.name {
            color: #9999FF;
        }
        >.field {
            padding: 5px;
            display: block;
            border: none;
            border-bottom: 1px solid #F5F5F5;
            width: 97%;
        }
        >.submit {
            background-color: #9999FF;
            border: none;
            color: white;
            padding: 2px 10px;

            &.-submithover:hover {

                 background-color: #ffffff;

            }
        }
}

">" for child selector

Element on multiple words

.scss

.profile-box {

        >.first-name {
            color: #9999FF;
        }
        >.lastname {
            padding: 5px;
            display: block;
            border: none;
            border-bottom: 1px solid #F5F5F5;
            width: 97%;
        }
        >.submit {
            background-color: #9999FF;
            border: none;
            color: white;
            padding: 2px 10px;

        }
}

Avoid tag selectors

.scss

.profile-box {

        >.name {
            color: #9999FF;
        }
        >.field {
            padding: 5px;
            display: block;
            border: none;
            border-bottom: 1px solid #F5F5F5;
            width: 97%;
        }
        >.submit {
            background-color: #9999FF;
            border: none;
            color: white;
            padding: 2px 10px;
        }
}

.scss

.profile-box {

        >.h1 {
            color: #9999FF;
        }
        >.a {
            padding: 5px;
            display: block;
            border: none;
            border-bottom: 1px solid #F5F5F5;
            width: 97%;
        }

}
 

Variants

Naming variants

.scss

.search-button {

        width: 100px;

        background-color: #FA8072;

        &.-smallbutton {
            width: 50px;

            background-color: #FA8072;
        }
       

        &.-largebutton {
            width: 200px;

        }
}

 

      <button class="search-button -smallbutton "> submit </button>

 

      <button class="search-button -largebutton "> submit </button>

 

      <button class="search-button"> submit </button>

Nested components

HTML

<div class="search-form">

   <input class="input" type="text">

   <button class="searchbutton -red -large"> submit </button>

</div>

 

.scss

.search-form {

      .searchbutton {

             width: 100px;

             background-color: #FFFFFF;

             &.-red {

                   background-color: #ff45df;

             }

             &.-large {

                   width: 200px;

             }

   }

}

<div class="search-form">

      <input class="input" type="text">

      <button class="submit"> submit </button>

</div>

 

.search-form {

      .submit {

             @extend searchbutton;

             @extend searchbutton -red;

             @extend searchbutton -large;   

     }

}

css processor's

@extend

Layouts

Avoid positioning properties

 

 

Positioning (position, top, left, right, bottom)

Floats (float, clear)

Margins (margin)

Dimensions (width, height)

Fixed dimensions

.logos {

      width: 100px;

      height: 100px;

}

.avatars {

      width: 100px;

      height: 100px;

}

Helpers

Naming helpers

._unmargin { margin: 0 !important; }

._center { text-align: center !important; }

._pull-left { float: left !important; }

._pull-right { float: right !important; }

<div class="text-box _pull-left">

    TEXT

</div>

<div class="text-box _center">

    TEXT

</div>