Rails SCSS

Posted by On 11月 09, 2014 0 Comment

Sass

SCSS
browser type interpreter

We saved scss file(.css.scss) under /app/assets/stylesheets

Local compile

scss style.css.scss style.css

Example

#books {
  margin: 0px;
  li {
    margin: 4px;
	list-style-type: square;
	a {
	  color: #00f;
	  &:hover { color: #0f0; }
	}
  }
}

variable

$spcolor: #f30;
#attention { color: $spcolor; }

#type: lime;

#margin-#{$type} {
 
}

calculation

#main menu {
  height: 1mm + 3cm;
}

method

SCSS has special methods Method List

$basecolor: #039;
#sidebar {
  background-color: lighten{$basecolor, 20%};
}

directive @name

@if @else if @else

$type: spring;
div {
  @if $type == spring {
    color: #0f0f;
  } @else if $type == fall {
  } @else {
    color: #0ff;
  }
}

@each

@each $snsd in yoona, taeyeon sooyong {
  .item-#{$snsd} { background-image: url('/images/#{$snsd}.png'); }
}

@while

@mixin / @include

Common setting

@mixin common-box {
}

.menu {
  @include common-box;
  text-align: left;
}

@extend

inherit and define new

.main-content {
  color: #300;
  background-color: #ffc;
}

.sub-content {
  @extend .main-content;
  border: solid 2px #003;
}

@import

Import external .scss 

@import 'common'      # we can cut .scss
@import 'common.scss'

Comment

//
/*
*/

TOPICS