مهندسی گرافیک به کمک SASS و ویژوال استدیو

 به عنوان تاریخچه موضوع , شروع کار من در وب در خیلی سال های دور با طراحی وب شروع شد , در آن زمان طرحی وب فقط شامل HTML و عکس بود , به مرور CSS وارد شد و سپس برای کار آسانتر با CSS استفاده از LESS شروع شد و حالا به جای  LESS توصیه به SASS .

اینکه SASS بهتر است یا LESS ؟ به نظر من SASS پرقدرت تر است در واقع برای برنامه نویسانی که می خواهند کار طراحی وب انجام دهند Syntax ارائه شده از طرف SASS نزدیکتر هست به Syntax زبانهای برنامه نویسی مثل PHP یا جاوا , بنابراین روند کار طرحی گرافیکی برای برنامه نویسان شفاف تر است و از طرف دیگر , برای طراحان وب نیز کار با CSS را به شکل ماجولار و مدون در می آورد . برای مقایسه بهتر این دو می توانید به این مقاله مراجعه کنید .

 اما خود SASS  چیست ؟

SASS  تقاطع گرافیک و کد در وب می باشد , ابزاری که به خوبی می تواند مفهوم مهندسی گرافیک را برساند . من در این مقاله قصد توضیح SASS را ندارم , اما به زبان ساده ابزاریی است برای اینکه نوشتن CSS  شبیه کد نویسی مدون و ماجولار باشد یعنی مفاهیمی مثل متد و ارث بری و ... در نوشتن بهتر CSS  کمک کند . برای توضیحات بیشتر می توانید به مقاله آشنایی با SASS یا Syntactically Awesome Stylesheets و روش نصب و استفاده از آن مراجعه نمایید .

یکی از بهترین فریم ورک های CSS  برای نمایش صحیح صفحات وب در انواع کامپیوتر ها و دستگاه های موبایل و مرورگر های مختلف BootStrap  می باشد , من در این مقاله قصد دارم مثال کوچک اما کاربردی از نحوه استفاده بهتر از BootStrap به کمک SASS  را توضیح دهم .

شما قبل از مطالعه این مقاله حتما" باید با Gulp آشنا باشید و مقاله استفاده از Bower در ویژوال استدیو 2013 را مطالعه بفرمایید .

ساختار کلی مثال بسیار شفاف است , یک پروژه Asp.Net MVC یا هر پروزه وبی دیگر در ویژوال استدیو , سپس :

1 - نصب پکیج های BootStrap SSAS Source و Jquery و Font Awesome SSAS و ModernizerJS و RespondJs به کمک Nuget یا Bower , طبق مقالات قبلی ترجیحا" با Bower .

همچنین من از BootStrap RTL برای پشتیبانی از حالت راست به چپ زبان فارسی در BootStrap استفاده کرده ام . لازم به ذکر است هر کدام از ابزار ذکر شده که در Nuget یا Bower پکیج نداشتن باید آنها را دستی دانلود کنید .

2 - بعد از نصب BootStrap SSAS Source و Font Awesome SSAS فولدر font-awesome-4.3.0 و bootstrap را به کمک gulp یا به صورت دستی در فولدر CSS های پروژه (در Asp.Net MVC فولدر Content) کپی کنید و دو فایل bootstrap.scss و font-awesome.scss را از محل نصب به کمک gulp یا به صورت دستی , داخل فولدر CSS های پروژه (در Asp.Net MVC فولدر Content) قرار دهید. همانند شکل زیر :

3 - نصب پکیج Bourbon به کمک Bower با دستور زیر :

bower install bourbon --save

Bourbon یکی از کامل ترین سری های Mixin برای SASS  می باشد . در حقیقیت Mixin شبیه متدها و توابع موجود در زبانهای برنامه نویسی می باشد , شما یک متد را یکبار می نویسید و بار ها از آن استفاده می کنید . این Mixin ها دارای انواع و اقسام افکت های CSS  می باشند که قابلیت نمایش صحیح در مرورگرهای متفاوت را دارا می باشند . بعد از نصب فولدر stylesheets را به کمک gulp یا به صورت دستی در فولدر CSS های پروژه (در Asp.Net MVC فولدر Content) کپی کنید , همانند شکل زیر :

4 - نصب ابزارک Web Essentials در ویزوال استدیو از منوی Tools > Extentions And Update , همانند شکل زیر :

 این ابزار برای طراحان و برنامه نویسان وب در ویژوال استدیو بسیار مفید است و توانایی های مختلفی دارد , اما موردی که در این مقاله مورد نیاز هست, کامپایل SASS  به CSS  می باشد .

5 - بر روی فولدر حاوی فایل های CSS پروژه خود کلیک کرده و همانند شکل زیر یک فایل از نوع SASS  با نام Main اضافه کنید :

سپس در پنجره باز شده , در پنل سمت چپ , کد های CSS  زیر را قرار دهید :

// Core variables and mixins

@import "bootstrap/variables";

@import "bootstrap/mixins";

@import "bootstrap/theme";

@import "stylesheets/settings/prefixer";

@import "stylesheets/settings/px-to-em";

@import "stylesheets/settings/asset-pipeline";

@import "stylesheets/functions/assign-inputs";

@import "stylesheets/functions/contains";

@import "stylesheets/functions/contains-falsy";

@import "stylesheets/functions/is-length";

@import "stylesheets/functions/is-light";

@import "stylesheets/functions/is-number";

@import "stylesheets/functions/is-size";

@import "stylesheets/functions/px-to-em";

@import "stylesheets/functions/px-to-rem";

@import "stylesheets/functions/shade";

@import "stylesheets/functions/strip-units";

@import "stylesheets/functions/tint";

@import "stylesheets/functions/transition-property-name";

@import "stylesheets/functions/unpack";

@import "stylesheets/functions/modular-scale";

@import "stylesheets/helpers/convert-units";

@import "stylesheets/helpers/directional-values";

@import "stylesheets/helpers/font-source-declaration";

@import "stylesheets/helpers/gradient-positions-parser";

@import "stylesheets/helpers/linear-angle-parser";

@import "stylesheets/helpers/linear-gradient-parser";

@import "stylesheets/helpers/linear-positions-parser";

@import "stylesheets/helpers/linear-side-corner-parser";

@import "stylesheets/helpers/radial-arg-parser";

@import "stylesheets/helpers/radial-positions-parser";

@import "stylesheets/helpers/radial-gradient-parser";

@import "stylesheets/helpers/render-gradients";

@import "stylesheets/helpers/shape-size-stripper";

@import "stylesheets/helpers/str-to-num";

@import "stylesheets/css3/animation";

@import "stylesheets/css3/appearance";

@import "stylesheets/css3/backface-visibility";

@import "stylesheets/css3/background";

@import "stylesheets/css3/background-image";

@import "stylesheets/css3/border-image";

@import "stylesheets/css3/calc";

@import "stylesheets/css3/columns";

@import "stylesheets/css3/filter";

@import "stylesheets/css3/flex-box";

@import "stylesheets/css3/font-face";

@import "stylesheets/css3/font-feature-settings";

@import "stylesheets/css3/hidpi-media-query";

@import "stylesheets/css3/hyphens";

@import "stylesheets/css3/image-rendering";

@import "stylesheets/css3/keyframes";

@import "stylesheets/css3/linear-gradient";

@import "stylesheets/css3/perspective";

@import "stylesheets/css3/placeholder";

@import "stylesheets/css3/radial-gradient";

@import "stylesheets/css3/selection";

@import "stylesheets/css3/text-decoration";

@import "stylesheets/css3/transform";

@import "stylesheets/css3/transition";

@import "stylesheets/css3/user-select";

$navbar-OO-Border: #C8C8C8 !default;

$navbar-OO-Light: rgba(227, 227, 227, 0.41) !default;

$navbar-OO-Dark: #F8F8F8 !default;

$OO-Box-Light: #d8ff78 !default;

$OO-Box-Dark: #d5ff6b !default;

$OO-shodowColor: rgba(0,0,0,0.35)!default;

$OO-shodowColorLight: #bbb!default;

$OO-Black: #000000 !default;

$OO-White: #fff !default;

$OO-Form-Dark: #e6e6e6 !default;

body {

background-image: url(/content/img/body.jpg);

font-family: Tahoma;

}

.navbar-default {

background-image: linear-gradient(to bottom, $navbar-OO-Light 0, $navbar-OO-Dark 100%) !important;

border-color: $navbar-OO-Border !important;

}

.navbar-default .navbar-nav>li>a:hover,

.navbar-default .navbar-nav>li>a:focus{

background-image: linear-gradient(to bottom, $OO-Box-Light 0, $OO-Box-Dark 100%) !important;

}

.navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .active > a {

background-image: linear-gradient(to bottom, $navbar-OO-Light 50%, $OO-Form-Dark 50%) !important;

border:inset 1px $navbar-OO-Light !important;

border-bottom:none !important;

border-top:none !important;

}

.wrapper {

@include make-row();

}

.ex_properWidth {

@include make-xs-column(10);

@include make-xs-column-offset(1);

}

.content-main {

@extend .ex_properWidth;

@include linear-gradient(to bottom,$OO-Box-Light 0%,$OO-Box-Dark 25%,$OO-Box-Light 100%);

@include box-shadow(-2px 5px 5px 0px $OO-shodowColor);

}

#search > form {

@include make-lg-column(10);

@include make-md-column(10);

@include make-sm-column(10);

@include make-xs-column(12);

@include make-lg-column-offset(1);

@include make-md-column-offset(1);

@include make-sm-column-offset(1);

margin: 0;

height: 3em;

background: $OO-White;

border: 1px solid $OO-White;

@include box-shadow( 0 0 2px 1px $OO-shodowColorLight);

border-radius: 4px;

@include background-image(linear-gradient(to bottom,$OO-White 0%,$OO-White 25%,$OO-Form-Dark 100%));

}

#search > form > input {

width:91%;

height: 100%;

background: transparent;

border: 0;

font-size: 0.9em;

}

.OO-SerchButton {

color: $OO-White;

@include btn-styles(#ff3030);

height: 100%;

}

.OO-SerchButtonGroup {

width:100px;

height: 100%;

position: absolute;

right: 0;

}

.btn:hover, .btn:focus, .btn.focus {

color: $OO-White !important;

}

.dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus {

height:120%;

background-image: linear-gradient(to bottom, $OO-Box-Light 0, $OO-Box-Dark 100%) !important;

}

 در قطعه کد بالا در ابتدا Mixin و متغییر های های مربوط به BootStrap و Bourbon  به کمک دستور Import@ و آدرس فایل های SSAS مربوطه مورد استفاده قرار گرفته اند مانند نمونه زیر :

@import "bootstrap/theme";

@import "stylesheets/settings/prefixer";

الباقی همه دستورات SASS  می باشد , برای تبدیل این دستورات به CSS  کافی است که چند بار دکمه Save را در نوار ابزار ویژوال استدیو فشار دهید , با این عمل در پنل سمت راست کد CSS  تولید شده به نمایش در خواهد آمد همانند شکل زیر :

و 3 فایل برای شما ساخته می شود که در شکل زیر نمایش داده شده است :

فایل Main.css که فایل CSS  تولید شده می باشد , فایل Main.min.css که فایل کم حجم شده Main.css می باشد و فایل Main.map.css , تمامی عملیات ساخت و کامپایل فایل SASS  قسمتی از توانایی های ابزارک Web Essentials می باشد .

خوب همانطور که در کد خروجی مشاهده می کنید , با استفاده از Mixin مربوط به BootStrap و Bourbon چقدر در وقت و هزینه تولید CSS  بهینه ایی که در همه مرورگرهای اصلی به درستی عمل کند صرفه جویی می شود . مثلا" به جای استفاده از کلاس row به طور مستقیم در صفحه HTML از Mixin  به شکل زیر استفاده شده است :

.wrapper {

@include make-row();

}

و یا برای ارث بری از کلمه کلیدی extend مثل نمونه زیر استفاده شده است :

.ex_properWidth {

@include make-xs-column(10);

@include make-xs-column-offset(1);

}

.content-main {

@extend .ex_properWidth;

@include linear-gradient(to bottom,$OO-Box-Light 0%,$OO-Box-Dark 25%,$OO-Box-Light 100%);

@include box-shadow(-2px 5px 5px 0px $OO-shodowColor);

}

بدین ترتیب وابستگی به فریم ورک BootStrap  کمتر خواهد شد , مثلا" اگر در آینده بخواهید از فریم ورک دیگری استفاده کنید .

خوب کار این مقاله در همین جا تمام است , اما من برای اینکه بتوانید خروجی کار را نیز مشاهده کنید , مقاله را چند سطر ادامه می دهم , عطف به Gulp و استفاده از Bower در ویژوال استدیو 2013 من یک فایل gulp به شکل زیر برای Bundling / Minification درست کردم :

///

// include plug-ins

var gulp = require('gulp');

var concat = require('gulp-concat');

var uglify = require('gulp-uglify');

var del = require('del');

var minifyCSS = require('gulp-minify-css');

var copy = require('gulp-copy');

var bower = require('gulp-bower');

var sourcemaps = require('gulp-sourcemaps');

var config = {

//JavaScript files that will be combined into a jquery bundle

jquerysrc: [

'Scripts/jquery-2.1.3.min.js',

'Scripts/bootstrap.min.js',

'Scripts/modernizr-2.8.3.js',

'Scripts/respond.min.js'

],

jquerybundle: 'Scripts/jquery-bundle.min.js',

//JavaScript files that will be combined into a Bootstrap bundle

bootstrapcss: [

'Content/bootstrap.min.css',

'Content/font-awesome.min.css',

'Content/RTL/bootstrap-rtl.min.css',

'Content/Main.css'

],

//bootstrapcss: 'Content/bootstrap.min.css',

cssout: 'Content'

}

// Synchronously delete the output script file(s)

gulp.task('clean-vendor-scripts', function (cb) {

del([config.jquerybundle], cb);

});

//Create a jquery bundled file

gulp.task('jquery-bundle', ['clean-vendor-scripts', 'bower-restore'], function () {

return gulp.src(config.jquerysrc)

.pipe(concat('jquery-bundle.min.js'))

.pipe(gulp.dest('Scripts'));

});

　

　

　

　

// Combine and the vendor files from bower into bundles (output to the Scripts folder)

gulp.task('vendor-scripts', ['jquery-bundle'], function () {

});

// Synchronously delete the output style files (css / fonts)

gulp.task('clean-styles', function (cb) {

del([config.cssout + '/app.min.css'], cb);

});

　

gulp.task('css', ['clean-styles', 'bower-restore'], function () {

return gulp.src(config.bootstrapcss)

.pipe(concat('app.css'))

.pipe(gulp.dest(config.cssout))

.pipe(minifyCSS())

.pipe(concat('app.min.css'))

.pipe(gulp.dest(config.cssout));

});

　

//Restore all bower packages

gulp.task('bower-restore', function () {

return bower();

});

//Set a default tasks

gulp.task('default', ['vendor-scripts', 'css'], function () {

});

 در قطعه کد بالا دقت کنید که دو فایل BootStrap.min.css و font-awesome.min.css توسط Web Essentials از کامپایل دو فایل bootstrap.scss و font-awesome.scss که در اول مقاله در داخل فولدر CSS های پروژه (در Asp.Net MVC فولدر Content) قرار داده ایم , ساخته شده اند و در نهایت کد صفحه HTML به شکل زیر :

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta charset="utf-8" />

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title></title>

　

<!--<link href="Content/bootstrap.min.css" rel="stylesheet" />

<link href="Content/font-awesome.min.css" rel="stylesheet" />

<link href="Content/RTL/bootstrap-rtl.min.css" rel="stylesheet" />

<link href="Content/Main.css" rel="stylesheet" />-->

 

<link href="Content/app.min.css" rel="stylesheet" />

</head>

<body role="document">

<header>

<nav class="navbar navbar-default">

<div class="container-fluid">

<!-- Brand and toggle get grouped for better mobile display -->

<div class="navbar-header">

<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">

<span class="sr-only">Toggle navigation</span>

<span class="icon-bar"></span>

<span class="icon-bar"></span>

<span class="icon-bar"></span>

</button>

</div>

<!-- Collect the nav links, forms, and other content for toggling -->

<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">

<ul class="nav navbar-nav">

<li class="active"><a href="#">آنلاین استاد</a></li>

 

<li class="dropdown">

<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">استادان <span class="caret"></span></a>

<ul class="dropdown-menu" role="menu">

<li><a href="#">Action</a></li>

<li><a href="#">Another action</a></li>

<li><a href="#">Something else here</a></li>

<li class="divider"></li>

<li><a href="#">Separated link</a></li>

<li class="divider"></li>

<li><a href="#">One more separated link</a></li>

</ul>

</li>

 

<li class="dropdown">

<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">شاگردان <span class="caret"></span></a>

<ul class="dropdown-menu" role="menu">

<li><a href="#">Action</a></li>

<li><a href="#">Another action</a></li>

<li><a href="#">Something else here</a></li>

<li class="divider"></li>

<li><a style="height: 100%" href="#">Separated link</a></li>

</ul>

</li>

<li><a href="#">ثبت نام در سایت</a></li>

<li><a href="#">ورود به سایت</a></li>

</ul>

<div class="navbar-left">

<img src="Content/img/onlineostad.png" style="margin-top: 5px;" />

</div>

</div><!-- /.navbar-collapse -->

</div><!-- /.container-fluid -->

</nav>

</header>

<div class="container-fluid" role="search">

<div class="wrapper">

<div id="search" class="well well-sm content-main">

<form>

<i style="position:absolute;left: 0;top: 30%" class="fa fa-search fa-lg"></i>

<input id="search_input" type="search" name="q" placeholder="جستجوی درس و استاد" class="pull-left">

<!-- Split button -->

<div class="btn-group OO-SerchButtonGroup">

<button type="button" class="btn OO-SerchButton">جستجو</button>

<button type="button" class="btn dropdown-toggle OO-SerchButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">

<span class="caret"></span>

<span class="sr-only">Toggle Dropdown</span>

</button>

<ul class="dropdown-menu">

<li><a href="#">استاد</a></li>

<li><a href="#">درس</a></li>

</ul>

</div>

</form>

</div>

</div>

</div>

<div class="container-fluid" role="banner">

 

</div>

<!--<script src="Scripts/jquery-2.1.3.min.js"></script>

<script src="Scripts/bootstrap.min.js"></script>

<script src="Scripts/modernizr-2.8.3.js"></script>

<script src="Scripts/respond.min.js"></script>

-->

<script src="Scripts/jquery-bundle.min.js"></script>

</body>

</html>

همانطور که در کد بالا مشاهده می کنید به کمک gulp به جای استفاده از 8 فایل CSS و JS  تنها از دوفایل jquery-bundle.min.js و app.min.css استفاده شده است.

نتیجه گیریی

ما در این 2 مقاله با مزایای gulp و Bower و SASS اشنا شدیم و با یک مثال کاربردی نحوه صحیح استفاده از آنها را یاد گرفتیم , شما برای توسعه و نگهداری یک پروژه متوسط یا بزرگ , چاره ایی ندارید تا همانند معماری Application در سمت سرور در سمت Client نیز چارچوب بهینه و قابل توسعه و نگهداری آسان داشته باشید , لذا ابزار ذکر شده این نوانایی را دارند تا انضباط و ساختار قابل توسعه مدونی در اختیار شما قرار دهند .