Статьи

Компас: CSS Authoring Framework

Июнь 21, 2018
Compass — еще одна популярная среда разработки CSS. Он основан на SASS. Он предоставляет два мощных модуля:
Compass Core и
Blueprint . Вы можете узнать больше
здесь . В этой демонстрации: «
Мы установим драгоценный камень компаса и прикрепим наблюдателя к одному из наших проектов, чтобы отслеживать изменения SCSS ». Начальная
 структура проекта:

  •  Содержимое файла my-markup.html выглядит следующим образом:
<!DOCTYPE html>
<html>
<head>
<title>TS : Compass Watcher Demo</title>
<link rel='stylesheet' type="text/css"  href='./stylesheets/my-style.css'>
</head>
<body>
 
 <table class='ts-student-table'>
  <thead>
   <tr>
    <th>NAME</th>
    <th>ROLL</th>
    <th>MARK</th>
    <th>COUNTRY</th>
   </tr>
  </thead>
  <tbody>
   <tr class='odd'>
    <td>Sandeep</td>
    <td>001</td>
    <td>235</td>
    <td>India</td>
   </tr>
   <tr class='even'>
    <td>John</td>
    <td>002</td>
    <td>335</td>
    <td>US</td>
   </tr>
   <tr class='odd'>
    <td>Stephen</td>
    <td>003</td>
    <td>135</td>
    <td>UK</td>
   </tr>
    
   <tr class='even'>
    <td>Philip</td>
    <td>004</td>
    <td>139</td>
    <td>Germany</td>
   </tr>
  </tbody>
 </table>
 
</body>
</html>
  • Мой-style.scss файл содержит SASS код , как показано ниже:
table.ts-student-table{
 
 border-spacing:0;
    border-collapse:collapse;
     
 thead{
  background:#000;
  color:#fff;
 }
 tbody{
  
  tr.even{
   background:#cccccc;
  }
   
  tr.odd{
   background:#808080;
  }
  
 }
}
  • Компас может быть установлен с помощью команды GEM, как показано ниже,
  •  Давайте запустим Watcher Compass, чтобы наблюдать за изменениями в проекте. При первом запуске он обнаружил наличие файла my-style.scss , поэтому он создал соответствующий CSS-файл  my-style.css в каталоге стилей . Проверьте скриншот ниже:
  •  Это также создает временный каталог кэша для управления и мониторинга изменений. Имя каталога — «.sass-cache» . Проверьте скриншот ниже:
  • Давайте изменим цвет фона четных строк на желтый. Мы видим журнал мониторинга и перемещения изменений из файла SCSS в файл CSS . Проверьте экран ниже:

  •  Наконец, вывод в браузере будет выглядеть как на скриншоте ниже:

33
Share: