[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.

[Ruby on Rails系列]5、专题:Talk About 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/

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

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.

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

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

Now I write HTML code to test it.

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

The result:

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

[Example 2]computing

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

SASS code is here:

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

[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:;
padding:;
list-style: none;
}
li {
display: inline-block;
}
a {
display: block;
padding: 6px 12px;
text-decoration: none;
}
}

Css code will be automatic generated:

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

HTML code and test:

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

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

[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)
}

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

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

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

[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;
}

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

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

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

[Example 6]function

Sass code:

@function changecolor ($color) {

@return $color;

}

#sidebar {

color: changecolor(red);

}

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

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

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

It is very interesting! Just enjoy it !

上一篇:撸一撸Spring Cloud Ribbon的原理-负载均衡策略


下一篇:使用C#在word中插入页眉页脚