[Ruby on Rails系列]5、专题：Talk About SaSS

This is my presentation in the Rails lecture of Hosei University.

I will introduce SaSS by 5 examples. 

 

1, What is SASS?

---

We can get into the official site of SASS.

The official site give the definition of Sass.

Sass is the most mature,stable,and powerful professional grade CSS extension language in the world.

 

[Here are some characters of SASS]

•Sass (Syntactically Awesome Stylesheets) is a stylesheet language

•Sass is a scripting language that is interpreted into Cascading Style Sheets (CSS).

• Sass (in the larger context of both syntaxes) extends CSS by providing several mechanisms available in more traditional programming languages, particularly object-oriented languages, but that are not available to CSS3 itself.

•Sass is simply syntactic sugar for CSS

 

2,How to Write SASS

---

How to write Sass? If I just want to try, Do I need setup environment?

 

It is very easy to write Sass code. If you just want to try, you do not need config your environment. What you should do is using this website:http://sassmeister.com/ 

You can test your code here. It is a cool web environment to write SaSS code. You write SaSS code, then the environment will transfer it to CSS code. It is so cool to use it.

 

3,Some Examples

---

Now I get some examples to write Sass.

[Example 1]variables

Sass allow us to define variables.

SASS Code is here:

$blue : #1875e7;
div {
color : $blue;
}

It will be transfer to css  code.

Now I write HTML code to test it.

The result:

 

[Example 2]computing

 

Sass allow us to write some Expression. Then it will computing the expression.

SASS code is here:

 

[Example 3]nesting

 

CSS does support logical nesting, but the code blocks themselves are not nested. Sass allows the nested code to be inserted within each other.

 

Sass code:

nav {
  ul { 
    margin: 0; 
    padding: 0; 
    list-style: none;
  } 
  li { 
    display: inline-block; 
  } 
  a { 
    display: block; 
    padding: 6px 12px; 
    text-decoration: none; 
  } 
}

Css code will be automatic generated:

HTML code and test:

 

[Example 4]mixins

 

Mixins is just like the macro in C Program language.

Sass code :

@mixin left ($value: 10px) {

float: left;

margin-left: $value;

}


div  {
  @include left (30px)
}

 

[Example 5]Selector inheritance

 

SaSS code:

.message {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}

.success {
  @extend .message;
  border-color: green;
}

.error {
  @extend .message;
  border-color: red;
}

.warning {
  @extend .message;
  border-color: yellow;
}

 

[Example 6]function

 

Sass code:

@function changecolor ($color) {

@return $color;

}

#sidebar {

color: changecolor(red);

}

 

 

It is very interesting! Just enjoy it !