Làm cách nào để đưa tệp CSS vào SCSS?

API tìm kiếm

• Đọc thêm về Hướng dẫn từng bước thiết lập Apache Solr 5. x trong CentOS 7 cho bản phân phối Drupal 7 Panopoly sử dụng API tìm kiếm

  SCSS là cú pháp thứ hai của Sass [Syntactally Awesome Stylesheet] sử dụng dấu ngoặc thay vì thụt đầu dòng. SCSS được thiết kế sao cho tệp CSS3 hợp lệ cũng là tệp SCSS hợp lệ. Các tệp SCSS được lưu trữ với. phần mở rộng scss

  Tại sao nên sử dụng SCSS

  Vì thiết kế của các trang web đang trở nên phức tạp dẫn đến các tệp CSS lớn. Các tệp như vậy khó bảo trì hơn. Đây là nơi SCSS xuất hiện. SCSS giới thiệu các biến, lồng, trộn, nhập và kế thừa bộ chọn trong quá trình phát triển CSS. Những bổ sung này giúp làm việc với thiết kế thú vị hơn rất nhiều

  Cách sử dụng tệp SCSS

  Các tệp SCSS không được đưa trực tiếp vào tài liệu HTML như CSS. Thay vào đó, các tệp SCSS được chuyển đổi thành tệp CSS được bao gồm trong tệp HTML. Để cài đặt SCSS trên hệ thống của bạn, hãy làm theo hướng dẫn trên Trang web chính thức của Sass. Để chuyển đổi SCSS sang CSS, bạn có thể chuyển đổi tệp SCSS đã lưu hoặc theo dõi các thay đổi và chuyển đổi khi tệp được lưu. Các lệnh cho cả hai được đưa ra dưới đây

  Chuyển đổi một lần

  Tham số đầu tiên là tệp SCSS nguồn và tham số thứ hai là tệp CSS đầu ra

  ________số 8_______

  Theo dõi các thay đổi

  Lệnh có một cờ watch* bổ sung để giữ cho lệnh chạy và ngay khi tệp SCSS được lưu, CSS đầu ra sẽ được tạo

  sass --watch main.scss main.css
  

  Cú pháp SCSS

  SCSS hỗ trợ các biến, lồng, trộn, nhập, kế thừa bộ chọn, v.v. Đưa ra dưới đây là ví dụ về các tính năng này

  Biến

  Bằng cách sử dụng các biến, bạn có thể đặt thông tin có thể sử dụng lại như màu chính hoặc màu nền cho nút lưu. Điều này hữu ích nếu bạn cần thay đổi thông tin đó, bạn chỉ cần thay đổi thông tin đó tại một vị trí và thông tin này sẽ cập nhật ở bất cứ nơi nào thông tin được sử dụng

  SCSS

  $primary-color: #47dff0;
  $secondary-color: darken[$primary-color, 50%];
  $margin: 16px;
  
  .highlight {
      border-color: $primary-color;
      color: $secondary-color;
  }
  
  h1 {
      span {
          margin: $margin / 2;
      }
  
      color: $secondary-color;
  }
  

  CSS đã tạo

  .highlight {
    border-color: #47dff0;
    color: #042f34;
  }
  
  h1 {
    color: #042f34;
  }
  h1 span {
    margin: 8px;
  }
  

  làm tổ

  Bạn có thể lồng các bộ chọn CSS tương tự như cấu trúc phân cấp của HTML. Trong ví dụ được đưa ra dưới đây, nhịp được lồng bên trong khối h1

  SCSS

  $primary-color: #47dff0;
  $secondary-color: darken[$primary-color, 50%];
  $margin: 16px;
  
  .highlight {
      border-color: $primary-color;
      color: $secondary-color;
  }
  
  h1 {
      span {
          margin: $margin / 2;
      }
  
      color: $secondary-color;
  }
  

  CSS đã tạo

  .highlight {
    border-color: #47dff0;
    color: #042f34;
  }
  
  h1 {
    color: #042f34;
  }
  h1 span {
    margin: 8px;
  }
  

  hỗn hợp

  Mixins có thể được sử dụng để nhóm các thuộc tính tương tự lại với nhau được sử dụng cùng nhau ở nhiều nơi. Bạn cũng có thể truyền tham số cho mixins

  SCSS

  Khai báo mixin

  // Simple
  @mixin error-text {
      color: red;
      font-size: 25px;
      font-weight: bold;
      border: 1px solid black;
      padding: 10px;
  }
  
  // With Parameter
  @mixin message-text[$color] {
      color: $color;
      font-size: 25px;
      font-weight: bold;
      border: 1px solid black;
      padding: 10px;
  }
  

  Sử dụng mixin

  .error {
      @include error-text[];
  }
  
  .success {
      @include message-text[green];
  }
  
  .info {
      @include message-text[blue];
  }
  

  CSS đã tạo

  .error {
    color: red;
    font-size: 25px;
    font-weight: bold;
    border: 1px solid black;
    padding: 10px;
  }
  
  .success {
    color: green;
    font-size: 25px;
    font-weight: bold;
    border: 1px solid black;
    padding: 10px;
  }
  
  .info {
    color: blue;
    font-size: 25px;
    font-weight: bold;
    border: 1px solid black;
    padding: 10px;
  }
  

  Mở rộng

  Mở rộng/Kế thừa rất hữu ích trong trường hợp các thuộc tính của một bộ chọn cần được chia sẻ với một bộ chọn khác. Trong ví dụ dưới đây, các. bộ chọn thông báo lỗi lấy tất cả các thuộc tính của. bộ chọn văn bản lỗi và thêm các thuộc tính đường viền và phần đệm

  SCSS

  .error-text {
      color: red;
      font-size: 25px;
      font-weight: bold;
  }
  
  .error-notice {
      @extend .error-text;
      border: 1px solid black;
      padding: 10px;
  }
  

  CSS đã tạo

  sass --watch main.scss main.css
  

  0

  Nhập khẩu

  Nhập khẩu có thể hữu ích trong việc phân tách các mối quan tâm. Bạn có thể phân chia các kiểu sao cho các kiểu đầu trang nằm trong một tệp riêng, các kiểu chân trang nằm trong một tệp riêng, tất cả các biến màu được sử dụng trong các kiểu có thể nằm trong một tệp riêng, v.v. Sử dụng kỹ thuật này, các phong cách được tổ chức. Bạn chỉ cần nhập các tệp trong tệp SCSS chính của mình như trong ví dụ bên dưới. Bạn không cần chỉ định phần mở rộng tệp trong hướng dẫn nhập. Sass biên dịch trực tiếp tất cả các tệp SCSS. Để tránh các tệp nhập được biên dịch trực tiếp, bạn có thể biến chúng thành từng phần bằng cách thêm dấu gạch dưới [_] trước tên của chúng. Bạn có thể nhập các phần tương tự như các tệp SCSS bình thường mà không có dấu gạch dưới