Định dạng file css được complie từ sass

Khi làm việc với SASS, thỉnh thoảng chúng ta cần thay đổi định dạng của file css sau khi complie cho phù hợp hơn với yêu cầu của Boss. Với định dạng mặc định :nested cũng khá là tốt rồi, nhưng khi bạn làm việc với 1 project lớn, có thể tiết kiệm kha khá băng thông bằng cách sử dụng compressed để sass tự động loại bỏ thành phần thừa trong css đi.

Sass hỗ trợ sẵn 04 kiểu định dạng sau:

• :nested
• :compact
• :expanded
• :compressed

Cụ thể mỗi định dạng sẽ cho ra css như sau:

SASS

.widget-social {
    text-align: right;

    a,
    a:visited {
        padding: 0 3px;
        color: #222222;
        color: rgba(34, 34, 34, 0.77);
     }

    a:hover {
        color: #B00909;
    }

}

:nested

.widget-social {
  text-align: right; }
  .widget-social a,
  .widget-social a:visited {
    padding: 0 3px;
    color: #222222;
    color: rgba(34, 34, 34, 0.77); }
  .widget-social a:hover {
    color: #B00909; }

:compact

.widget-social { text-align: right; }
.widget-social a, .widget-social a:visited { padding: 0 3px; color: #222222; color: rgba(34, 34, 34, 0.77); }
.widget-social a:hover { color: #B00909; }

:expanded

.widget-social {
  text-align: right;
}
.widget-social a,
.widget-social a:visited {
  padding: 0 3px;
  color: #222222;
  color: rgba(34, 34, 34, 0.77);
}
.widget-social a:hover {
  color: #B00909;
}

:compressed

.widget-social{text-align:right}.widget-social a,.widget-social a:visited{padding:0 3px;color:#222222;color:rgba(34,34,34,0.77)}.widget-social a:hover{color:#B00909}

Cách thay đổi định dạng css khi complie từ sass

Việc thay đổi định dạng file css được xuất ra tùy thuộc bạn đang sử dụng Complier nào. Nếu bạn đang sử dụng dạng GUI như CodeKit hay LiveReload thì đều đã có tùy chọn cho mỗi dự án. Còn nếu bạn sử dụng complier JavaScript như Gulp hay Grunt với gói Sass thì bạn cần cấu hình trong file config của chúng. Hoặc trực tiếp sử dụng trên command line bằng option --style <định_dạng>. Cụ thể:

sass --watch style.scss:style.css --style compressed

Lời kết