Skip to main content

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
------Brings to you with ♥️ by vietnamtutor.com
Việt Nam Tutor

Xin chào, tôi là Anthony Nguyễn, một lập trình viên Full Stack với nhiều năm kinh nghiệm trong ngành công nghệ thông tin. Tôi tận dụng kiến thức và kỹ năng của mình để tạo ra các giải pháp công nghệ đột phá và đáp ứng những bài toán thách thức, phức tạp.Tôi luôn sẵn sàng để kết nối và học hỏi từ cộng đồng, cũng như chia sẻ những kiến thức và thông tin hữu ích. Với tôi, việc xây dựng kiến thức là như xây dựng một tòa nhà - cần có sự kiên nhẫn, kiến thức vững chắc, và sự cống hiến để tạo nên sự thành công.Nếu bạn có câu hỏi, ý kiến, hoặc muốn kết nối với tôi để thảo luận về công nghệ, đừng ngần ngại liên hệ tôi. Rất mong được nhận gạch đá từ các bạn!

Leave a Reply