MEANJS - Run SASS by GULP

Bạn đã từng code css, bạn đã từng chán ngán với những thao tác lặp đi lặp lại. Bạn cần có 1 công cụ nào đó để hỗ trợ tốt hơn. Vâng Sass ra đời để đáp ứng điều đó. Với Sass bạn có thể có những dòng code trong sáng hơn, bạn có thể quản lí những thuộc tính dưới dạng biến và ti tỉ những thứ khác nữa ...

Và bạn có thể google thêm để biết thêm chi tiết về sức mạnh của SASS :)).

Trong bài viết này tôi sẽ giới thiệu cách cài đặt Sass cho MeanJs.

1.SASS là gì?

• Theo cách hiểu của tôi, SASS được hiểu nôm na là 1 công cụ gen ra css. Bạn viết css theo kiểu của SASS (sáng sủa dễ đọc hơn css thông thường, còn hơn điểm nào bạn có thể vào đây tham khảo : http://sass-lang.com/), SASS gen ra css cho bạn.
• ==> Input = "Sass code" Output = "File css"

2.SASS và MEANJS.

• MEANJS là một framework tích hợp MONGODB, EXPRESSJS, ANGULARJS, NODEJS
• Để run ứng dụng MEANJS, theo như info ở trang chủ http://meanjs.org/docs/0.4.x/ chúng ta dùng 1 trong 2 tash runner GULP và GRUNT . Và cũng dùng task runner để chạy sass build ra css. Trong bài viết này tôi sẽ giới thiệu cách run SASS với GULP.

3.Chạy SASS với GULP

• Thư viện cần dùng: Bootstrap-sass và gulp-sass
  • Bạn có thể cài đặt 2 gói thư viện đó vs lệnh sau:

    bower install bootstrap-sass --save npm install gulp-sass --save 

* Tiếp theo chúng ta cần cấu hình cho file ```gulpfile.js ```   * Định nghĩa thêm biến ```sass = require('gulp-sass')```  * Sửa lại đoạn khai báo gulp task        ``` gulp.task('sass', function () {        return gulp.src(defaultAssets.client.sass)            .pipe(sass().on('error', sass.logError))            .pipe(gulp.dest('public/lib'));        });```    *     ```  defaultAssets.client.sass``` đây là src của file .scss mà bạnbạn định nghĩa.    Giá trị này được định nghĩa trong file ```config/assets/default.js``` .Trong trường hợp của tôi    ```sass: ['modules/core/client/css/main.scss']```,        Trong file main.scss tôi sẽ import những file sass khác cần thiết vào.    *    Ở đây tôi import thư viện bootstrap vừa cài đặt ở bên trên :                        ``` @import "public/lib/bootstrap-sass/assets/stylesheets/_bootstrap.scss";```    *  ```public/lib``` Đây là thư mục chứa file **css** được gen ra. * Đăng ký task gulp để chạy task 'SASS'   ```       gulp.task('default', function (done) {          runSequence('env:dev', ['nodemon', 'sass', 'watch'], done);        });```     Lưu ý (Tôi đang chạy gulp với default là dev).  * Cuối cùng run ứng dụng  bằng lệnh **gulp** , sau đó trong thư mục ```public/lib``` sẽ xuất hiện file css được gen từ file scss khai báo ban đầu