Для цього прикладу ми скористаємося Less. Щоб зробити те ж саме для Sass, ви можете використовувати пакет grunt-contrib-compass. Ось наші параметри для компіляції Less-файлів. Як і в прикладі з мінімізацією JavaScrip в параметрах визначаються вихідні та вихідні файли.
<code data-language="javascript">//CSS less: { build: { files: { 'dist/css/pretty.css': 'src/css/pretty.less' }
}
}
});У цьому прикладі ми не встановлюємо будь-які параметри, просто компілюємо файл src/css/pretty.less у dist/css/pretty.css.
Для початку додамо трохи Less у наш вихідний файл.
/* src/css/pretty.less */
@red : #CC594A ; @yellow : #B8CC24; @blue: #8BC5FF; @purple : #6F3596; body {background:@red; color:@yellow; }
button { background:@blue; }
div { background:@purple; }Ми визначили кілька змінних Less та застосували їх до елементів. Тепер запустимо наше завдання!
<code>$ grunt less
Створюється файл dist/css/pretty.css, що містить результат компіляції Less у CSS і тепер він виглядає як звичайний стильовий документ.
/* dist/css/pretty.css */
body { background: #cc594a; color: #b8cc24; }
button { background: #8bc5ff; }
div { background: #6f3596; }Давайте поглянемо ще на пару речей, які ми можемо зробити за допомогою Grunt.