1. Variables

Giống với các ngôn ngữ lập trình ta khai báo biến để lưu trữ một giá trị được sử dụng nhiều lần. Để khai báo một biến ta sử dụng kí tự $ đằng trước tên biến

$text-success: #3c763d;

h1.big-title { color: $text-success; }

Kết quả

h1.big-title { color: #3c763d; }

2. Global Variables

Ở ví dụ trên nếu ta khai báo biến $text-success ở bên ngoài không nằm trong bất kì bộ chọn nào thì ở chỗ nào ta cũng có thể gọi được đến biến đó. Nhưng nếu bạn khai báo biến ở bên trong 1 bộ chọn thì phạm vi của biến sẽ chỉ nằm trong bộ chọn đấy.

h2 {
  $text-success: #3c763d;
  span {
    color: $text-success;
  }
}
h3 {
  color: $text-success;
}

Ở ví dụ trên bạn có thể hiểu được là biến $text-success được khai báo bên trong bộ chọn selector của h2 nên thẻ span nằm trong h2 có thế sử dụng được nhưng h3 thì không.

Để h3 sử dụng được biến trên thì ta thêm !global như dưới đây là ok

h2 {
  $text-success: #3c763d !global;
  span {
    color: $text-success;
  }
}
h3 {
  color: $text-success;
}

3. Data Types

Sass hỗ trợ 8 kiểu dữ liệu khác nhau:

• numbers: 1.2, 13, 10px
• strings of text, có hoặc không có dấu nháy: "foo", 'foo', foo
• colors: blue, green, #04a3f9, rgba(255, 0, 0, 0.5)
• booleans: true, false
• nulls: null
• lists of values, ngăn cách nhau bởi dấu cách hoặc dấu phẩy: 1.5em 1em 0 2em, Helvetica, Arial, sans-serif
• maps from one value to another: (key1: value1, key2: value2)
• function references

4. Operations

Sass hỗ trợ các kiểu toán tử so sánh, tính toán cộng, trừ, nhân, chia, lấy dư. Ngoài ra còn dùng được khi nối chuỗi.

4.1. Number Operations

Các kiểu hỗ trợ tính toán so sánh áp dụng với Data Types là Number. Xem ví dụ dưới đây để hiểu cách làm việc của Sass (lưu ý đặc biệt giữa kí hiệu slash / và phép chia /)

p {
  font: 10px/8px;                // Plain CSS, no division
  $width: 1000px;
  width: $width/2;               // Uses a variable, does division
  height: (500px/2);             // Uses parentheses, does division
  line-height: round(1.5)/2;     // Uses a function, does division
  margin-left: 5px + 8px/2px;    // Uses +, does division
  font: (italic bold 10px/8px);  // In a list, parentheses don't count
}

Kết quả

p {
  font: 10px/8px;
  width: 500px;
  height: 250px;
  line-height: 1;
  margin-left: 9px;
  font: italic bold 10px/8px;
}

4-2. Color Operations

Sass hỗ trợ việc tính toán các giá trị màu sắc lần lượt dựa trên 3 màu chính red, green, blue

.ex1 {
  color: #010203 + #040506;
}
.ex2 {
  color: #010203 * 2;
}
.ex3 {
  color: rgba(255, 0, 0, 0.75) + rgba(0, 255, 0, 0.75);
}

• Với ex1: 01 + 04 = 05, 02 + 05 = 07, 03 + 06 = 09
• Với ex2: 01 * 2 = 02, 02 * 2 = 04, 03 * 2 = 06
• Với ex3: cộng giá trị tương ứng với mỗi phần tử

.ex1 {
  color: #050709;
}
.ex2 {
  color: #020406;
}
.ex3 {
  color: rgba(255, 255, 0, 0.75);
}

4-3. String Operations

Nối chuỗi lại với nhau sử dụng dấu +, lưu ý chỉ áp dụng với Data Types là String

p:before {
  content: "Foo " + Bar;
  font-family: sans- + "serif";
  margin: 3px + 4px auto;
}

Kết quả

p:before {
  content: "Foo Bar";
  font-family: "san-serif";
  margin: 7px auto;
}

4-4. Interpolation

Sử dụng để lấy giá trị của một biến gán vào bộ chọn selector hoặc tên của thuộc tính sử dụng kí tự #{ }

$name: foo;
$attr: border;
$font-size: 12px;
$line-height: 30px;
//wrong
p.$name {
  $attr-color: blue;
  font: $font-size/$line-height;
}
//correct
p.#{$name} {
  #{$attr}-color: blue;
  font: #{$font-size}/#{$line-height};
}

Kết quả

p.foo {
  border-color: blue; 
  font: 12px/30px;
}