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

1. Dòng và đoạn văn tự động được ngắt 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 Search API

   Khi viết bài này, phiên bản mới nhất của Solr là 5. 2. 1. Trong hướng dẫn từng bước này, chúng tôi sẽ cài đặt phiên bản đó và tích hợp nó với trang web phân phối Drupal 7 Panopoly bằng mô-đun Search API. Trên thực tế, bản phân phối Panopoly đã được cung cấp cùng với các mô-đun Search API và Search API Solr Search. Tất cả những gì chúng ta cần làm là định cấu hình máy chủ và chỉ mục Solr API tìm kiếm được thiết lập sẵn. Điểm hay khi sử dụng API tìm kiếm là nó đã được tích hợp với mô-đun Chế độ xem và chúng tôi có thể tùy chỉnh không giới hạn với kết quả tìm kiếm của mình

   thẻ

   solr

   Tối ưu hóa web

   Drupal 7

   drupal

   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