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

by Việt Nam Tutor
0 comment

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

Mỗi định dạng đều có cái hay ho riêng của nó, nhưng mình thì thích dùng compressed hơn vì nó tiết kiệm băng thông cho product của chúng ta. Khi viết sass rồi thì ai lại quay về đọc hay chỉnh sửa css đâu chứ. :) Đấy là ý kiến cá nhân của mình, còn các bạn thì sao? Comment xuống dưới ý kiến của bạn hoặc nếu thấy hay đừng ngại share nhé!
Bài viết được biên dịch từ: Web Design Weekly
dmca badge w150 5x1 11 tại Việt Nam Tutor

You may also like

Leave a Comment