vi
new
+1
Avatar
namDN @namdn
74 1 7
Đã đăng vào thg 1 20, 2017 9:40 SA 8 phút đọc
423

Cùng nhau tìm hiểu về Sass (Syntactically Awesome StyleSheets)

Là 1 lập trình web,chắc hẳn ai trong chúng ta cũng đều đã biết tới và sử dụng CSS (ít nhiều) để style lại UI cho các module View vì đó là 1 trong những kiến thức cơ bản nhất mà web developer phải nắm được.Và có lẽ cũng đã có nhiều người thắc mắc về việc viết CSS nhiều khi có những đoạn lặp đi lặp lại, không có tính tái sử dụng được,khó nhìn, vì CSS không có quy tắc cụ thể nào cho việc đặc tả.Nhưng chúng ta không thể làm gì được hơn mà chỉ có thể cố gắng viết CSS sao cho dễ hiểu,flexible nhất đối với những ai sẽ phải đọc qua đoạn code đó.Đơn giản như chính tôi khi đọc những đoạn CSS mình viết còn thấy rườm rà,phức tạp và không nhất quán dẫn tới việc maintaince lại UI hay upgrade lên rất rối và mệt.(haiz).Nhưng những thứ đó không còn là khó khăn,vướng bận nữa từ khi 1 libs tool mới ra đời,cho phép chúng ta có thể tái sử dụng, clear code CSS,thậm chí là kế thừa,gọi function,thao tác với các expression.v.v...

CSS with superpowers

CSS COMPATIBLE FEATURE RICH MATURE INDUSTRY APPROVED LARGE COMMUNITY FRAMEWORKS

  • Ở trên là những thứ mà Sass đã đạt được, bây giờ chúng ta sẽ cùng nhau xem Sass hoạt động như thế nào,trước tiên các bạn cần tìm hiểu để install Sass theo guide sau : http://sass-lang.com/install

Preprocessing

Sass sẽ cho phép chúng ta các tính năng phức tạp,đa năng hơn rất nhiều mà CSS không có như là : variables, nesting, mixins (function), inheritance và rất nhiều các tính năng hữu dụng khác nữa giúp việc viết CSS trở nên rất dễ dàng và clear.Một khi bạn tìm hiểu và sử dụng Sass,nó sẽ tạo các Sass file và lưu lại như 1 file Css bình thường và bạn có thể sử dụng bình thường ở trên website.Cách thường được dùng nhất để tạo nên điều này là trong terminal của bạn.Một khi Sass được cài đặt, bạn có thể run lệnh sass input.scss output.css để compile sass file sang css file.

Trong trường hợp bạn muốn Sass luôn trong trạng thái theo dõi sự thay đổi của 1 sass file nào đó để đảm bảo nó luôn thay đổi liên tục nội dung hay modifies file đó có gì sai xót không.Chúng ta sẽ run : sass --watch app/sass:public/stylesheets và ngay lập tức sass file đó sẽ trong trạng thái watched.

Variables

Sass mở rộng thêm tính năng cho phép dev có thể sử dụng các biến,nhăm mục đích cho phép chúng ta có thể lưu trữ những thông tin css mà có thể được tái sử dụng xuyên suốt stylesheets.Ở đây bạn có thể lưu trữ những thứ như colors,fonts,hoặc bất kỳ các thuộc tính nào của CSS.Sass sử dụng $ symbol để tạo nên các biến.For example :

$font-stack:    Helvetica, sans-serif;
$primary-color: #333;

body {
  font: 100% $font-stack;
  color: $primary-color;
}

Khi Sass xử lý,nó sẽ tham chiếu tới các biến được dùng và lấy ra các thứ đã lưu trữ trong các biến mà nó tham chiếu tới và trả ra output là các giá trị CSS như bình thường

Output :

body {
  font: 100% Helvetica, sans-serif;
  color: #333;
}

Nesting

Thêm 1 tính năng có thể nói là rất hay của Sass, đó là Nesting,nó giúp cho việc viết các class CSS lồng nhau từ khó hiểu trở nên đơn giản và flexible hơn nhiều.Điều này có thể nhìn thấy đáng kể khi mà chúng ta vào maintaince 1 đống các class plain CSS.

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li { display: inline-block; }

  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}

Output :

nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

nav li {
  display: inline-block;
}

nav a {
  display: block;
  padding: 6px 12px;
  text-decoration: none;
}

Partials

Trong việc xây dựng các lớp Views bằng HTML cho 1 web apps,chúng ta thường có 1 kỹ thuật nhỏ là sử dụng các Partials,nó giống như các phần có thể sử dụng chung giữa nhiều Views hoặc là các thành phần tạo nên 1 Views.Bạn có thể định nghĩa ra các component của 1 Views bằng HTML tường ứng với các stylesheet với các component đó.Và khi gộp lại chúng ta sẽ sử dụng include của Sass để include các file Sass vào trong 1 file main.Tính năng này được xây dựng cũng để tăng hiệu năng khi maintaince và tái sử dụng mà Sass chú trọng tới.

In view A file sass :

  1. @include _header.scss
  2. @include _content.scss
  3. @include _footer.scss

Import

1 tính năng giống như require của PHP hay include của Java,cho phép bạn nhúng thêm các sass đã được xây dựng cho các module và gọi tới sử dụng ngay trên sass file chứa file import này.

in reset.scss :

html,
body,
ul,
ol {
   margin: 0;
  padding: 0;
}

in base.scss :

@import 'reset';

body {
  font: 100% Helvetica, sans-serif;
  background-color: #efefef;
}

Chú ý là chúng ta đang sử dụng reset file bên trong base file.Khi bạn import 1 file không cần thiết trong file extension.Sass sẽ tự đọng filter và bỏ qua các dư thừa đó cho chúng ta 😃.

Output :

html, body, ul, ol {
  margin: 0;
  padding: 0;
}

body {
  font: 100% Helvetica, sans-serif;
  background-color: #efefef;
}

Mixins

Việc viết đi viết lại các thứ mà đã từng viết sẽ gây nhàm chán rất nhiều,không những thế còn khó maintaince.Mixins cho phép bạn có thể tạo nên các nhóm định nghĩa CSS files mà bạn muốn tái sử dụng trong xuyên suốt web-site.Bạn có thể truyền giá trị cho các CSS đó vào trong 1 mixins 1 cách flexible hơn rất nhiều.

@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
     -moz-border-radius: $radius;
      -ms-border-radius: $radius;
          border-radius: $radius;
}

.box { @include border-radius(10px); }

Để tạo 1 minxins bạn sử dụng @mixins directive và tên của nó và sử dụng biến @radius để nhận tham số truyền vào khi 1 mixins được gọi tới bằng cách sử dụng @include và tên mixins cần dùng.Khi đó Processing của Sass sẽ tìm và compile ra CSS như sau :

.box {
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  border-radius: 10px;
}

Extend/Inheritance

Sass đã phá bỏ mọi giới hạn và đã đưa cả OOP vào trong việc viết CSS,1 điều từ trước tới nay chưa ai nghĩ tới.😃,đây là 1 trong những tính năng quan trọng nhất của Sass.Sử dụng @extend cho phép bạn chia sẻ 1 tập CSS các thuộc tính từ 1 selector tới những cái khác,đặc trưng của kế thừa trong OOP.

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

-> Compile Css :

.message, .success, .error, .warning {
  border: 1px solid #cccccc;
  padding: 10px;
  color: #333;
}

.success {
  border-color: green;
}

.error {
  border-color: red;
}

.warning {
  border-color: yellow;
}

Operators

Tính năng cuối cùng mà mình muốn giới thiệu tới các bạn đó là Operators,thêm 1 thứ mà từ trước tới giờ ko ai có thể nghĩ là lại sử dụng vs CSS của mình cả 😃,bạn có thể thao tác với các phép toán +, - , *, /, % 1 cách đơn giản để tính toán các px cho width,height hay các attribute # của 1 selector và đặc biệt là Sass đã tối ưu hóa tính tái sử dụng và maintaince trong khi xây dựng CSS style

.container { width: 100%; }


article[role="main"] {
  float: left;
  width: 600px / 960px * 100%;
}

aside[role="complementary"] {
  float: right;
  width: 300px / 960px * 100%;
}

.container {
  width: 100%;
}

article[role="main"] {
  float: left;
  width: 62.5%;
}

aside[role="complementary"] {
  float: right;
  width: 31.25%;
}

Ở trên là những gì mình nghĩ là cơ bản và quan trọng để nắm vững Sass,1 ngôn ngữ tối ưu hóa và được sử dụng nhiều nhất cho việc xây dựng các libs CSS hiện tại bởi những cải tiến đáng kể cho CSS Plain mà chúng ta cần phải build và sử dụng.Mong bài viết sẽ có ích cho mọi người.Have a nice day 😃

Links reference : [For more informations about Sass,please read this guide] (http://sass-lang.com/guide)

SaaS

All rights reserved

Mục lục


Viblo
Hãy đăng ký một tài khoản Viblo để nhận được nhiều bài viết thú vị hơn.
Đăng kí