آموزش string operation در SASS

آموزش Sass –عملیات مربوط به رشته (string operation)

شما می توانید با استفاده از + مقادیر رشته ای را به یکدیگر متصل نمایید (font-size: 5px+3px).

مثال کاربردی

مثال زیر نحوه ی انجام عملیات اتصال بر روی نوع داده ای رشته در فایل SCSS را نمایش می دهد:

< html >
   < head >
    < title >String Operations< /title >
    < link rel="stylesheet" type="text/css" href="style.css" / >
    < link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" >
    < script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js" >< /script >
    < script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js" >< /script >
   < /head >
   < body >
      < div class="container" >
         < h3 >Example using Sass Strings Operations< /h3 >
         < p >SASS stands for Syntactically Awesome Stylesheet..< /p >
      < /div >
   < /body >
< /html >

فایل style.scss را ایجاد نمایید.

style.scss

کد SCSS زیر مقادیر را به یکدیگر متصل کرده و font size (اندازه ی فونت) دستورات تگ

را افزایش می دهد.

p {
   font-size: 5px + 10px;
}

با اجرای دستور زیر می توانید به SASS دستور دهید که بر روی محتوای فایل نظارت داشته و هرگاه فایل بروز رسانی شد، CSS متناظر را بروز رسانی کند.

sass --watch C:\ruby\lib\sass\style.scss:style.css

با اجرا کردن دستور فوق، فایل style.css با محتوای زیر به صورت خودکار ایجاد می شود.

style.css
p {
   font-size: 15px;
}

خروجی

با طی کردن مراحل زیر از کد بالا خروجی بگیرید.

• کد html فوق را در فایل string_operations.html ذخیره نمایید.
• فایل html مورد نظر را با مرورگر دلخواه باز نموده و نتیجه را مشاهده نمایید.