Sass



sass

ساس (أوراق نمط مذهل)

Sass هو امتداد ل CSS الذي يضيف القوة والأناقة إلى اللغة الأساسية. يسمح لك باستخدام variables ، والقواعد المتداخلة ، mixins ، والواردات المضمنة ، وأكثر من ذلك ، كل ذلك باستخدام بنية متوافقة تماما مع CSS. يساعد Sass في الحفاظ على تنظيم أوراق عمل كبيرة بشكل جيد ، والحصول على أوراق أنماط صغيرة وتشغيلها بسرعة ، خاصة بمساعدة مكتبة نمط البوصلة .

الميزات

  • متوافق تماما مع CSS
  • امتدادات اللغة مثل المتغيرات ، والتداخل ، والخلطات
  • العديد من الوظائف المفيدة لمعالجة الألوان والقيم الأخرى
  • ميزات متقدمة مثل توجيهات التحكم للمكتبات
  • إخراج منسق بشكل جيد وقابل للتخصيص

بناء الجملة

هناك نوعان من البنى المتاحة لساس. الأولى ، والمعروفة باسم SCSS (Sassy CSS) والمستخدمة في هذا المرجع ، هي امتداد لبنية CSS. وهذا يعني أن كل ورقة أنماط صالحة لـ CSS هي ملف SCSS صالح بنفس المعنى. بالإضافة إلى ذلك ، يتفهم نظام SCSS معظم اختصارات CSS والبنية الخاصة ببائعي الجملة ، مثل بنية filter IE القديمة . يتم تحسين بناء الجملة هذا باستخدام ميزات Sass الموضحة أدناه. تحتوي الملفات التي تستخدم بناء الجملة هذا على ملحق .scss .

يوفر بناء الجملة الثاني والأقدم ، والمعروف باسم بناء الجملة ذي المسافة البادئة (أو أحيانًا "Sass") ، طريقة أكثر اختصارًا لكتابة CSS. ويستخدم المسافة البادئة بدلاً من الأقواس للإشارة إلى تداخل المحددات ، والخطوط الجديدة بدلاً من الفواصل المنقوطة لفصل الخصائص. يجد بعض الناس أن هذا أسهل في القراءة وأسرع في الكتابة من SCSS. يحتوي بناء الجملة ذو المسافة البادئة على نفس الخصائص ، على الرغم من أن بعضها يحتوي على بنية مختلفة قليلاً. يتم وصف هذا في مرجع بناء جملة بادئة . تحتوي الملفات التي تستخدم بناء الجملة هذا على الامتداد .sass .

يمكن لأي من الجمل أن يقوم باستيراد الملفات المكتوبة في الأخرى. يمكن تحويل الملفات تلقائيًا من بناء جملة إلى أخرى باستخدام أداة سطر الأوامر sass-convert :

# Convert Sass to SCSS
$ sass-convert style.sass style.scss

# Convert SCSS to Sass
$ sass-convert style.scss style.sass

لاحظ أن هذا الأمر لا يقوم بإنشاء ملفات CSS. لذلك ، استخدم الأمر sass الموصوف في مكان آخر.

باستخدام ساس

يمكن استخدام Sass بثلاث طرق: كأداة سطر أوامر ، كوحدة روبي مستقلة ، وكمكوّن إضافي لأي إطار يدعم Rack ، بما في ذلك Ruby on Rails و Merb. الخطوة الأولى لكل ذلك هي تثبيت Sass gem:

gem install sass

إذا كنت تستخدم Windows ، فقد تحتاج إلى تثبيت Ruby أولاً.

لتشغيل ساس من سطر الأوامر ، استخدم فقط

sass input.scss output.css

يمكنك أيضًا إخبار Sass بمشاهدة الملف وتحديث CSS في كل مرة يتغير فيها ملف Sass:

sass --watch input.scss:output.css

إذا كان لديك دليل يحتوي على العديد من ملفات Sass ، يمكنك أيضًا إخبار Sass بمشاهدة الدليل بأكمله:

sass --watch app/sass:public/stylesheets

استخدام sass --help لتوثيق كامل.

استخدام ساس في رمز روبي بسيط جدا. بعد تثبيت Sass gem ، يمكنك استخدامه عن طريق تشغيل require "sass" وباستخدام Sass::Engine مثل:

engine = Sass::Engine.new("#main {background-color: #0000ff}", :syntax => :scss)
engine.render #=> "#main { background-color: #0000ff; }\n"

الرف / القضبان / البرنامج المساعد Merb

لتمكين إصدارات Sass in Rails قبل Rails 3 ، أضف السطر التالي إلى environment.rb :

config.gem "sass"

بالنسبة إلى Rails 3 ، قم بإضافة السطر التالي إلى Gemfile:

gem "sass"

لتمكين Sass في Merb ، أضف السطر التالي إلى config/dependencies.rb :

dependency "merb-haml"

لتمكين تطبيق Sass في Rack ، أضف الأسطر التالية إلى config.ru .

require 'sass/plugin/rack'
use Sass::Plugin::Rack

لا تعمل أوراق أنماط Sass بنفس طرق العرض. وهي لا تحتوي على محتوى ديناميكي ، لذلك تحتاج CSS فقط إلى توليدها عند تحديث ملف Sass. بشكل افتراضي ، يتم وضع ملفات .scss و .scss في public / stylesheets / sass (يمكن تخصيص ذلك باستخدام الخيار :template_location ). ثم ، عند الضرورة ، يتم تجميعها في ملفات CSS المقابلة في العام / أوراق الأنماط. على سبيل المثال ، سيتم تجميع public / stylesheets / sass / main.scss إلى public / stylesheets / main.css.

التخزين المؤقت

بشكل افتراضي ، يقوم Sass بتخزين قوالب partials مجمعة. يعمل هذا بشكل كبير على تسريع إعادة تجميع مجموعات كبيرة من ملفات Sass ، ويعمل بشكل أفضل إذا كانت قوالب Sass مقسمة إلى ملفات منفصلة وكلها في @import ed إلى ملف كبير واحد.

بدون إطار ، يضع Sass القوالب المخزنة مؤقتاً في .sass-cache directory. في القضبان و Merb ، يذهبون في tmp/sass-cache . يمكن تخصيص الدليل باستخدام الخيار :cache_location . إذا كنت لا ترغب في استخدام التخزين المؤقت Sass على الإطلاق ، :cache خيار :cache false .

خيارات

يمكن تعيين خيارات عن طريق تعيين Sass::Plugin#options تجزئة في environment.rb في Rails أو config.ru في Rack ...

Sass::Plugin.options[:style] = :compact

... أو عن طريق تعيين Merb::Plugin.config[:sass] التجزئة في init.rb في Merb ...

Merb::Plugin.config[:sass][:style] = :compact

... أو تمرير تجزئة خيارات إلى Sass::Engine#initialize . جميع الخيارات ذات الصلة متاحة أيضا عن طريق الأعلام إلى scss و scss الأوامر التنفيذية. الخيارات المتاحة هي:

# style-option :style : لتعيين نمط خلاصة CSS. انظر نمط الإخراج .

# syntax-option :syntax : صيغة ملف المدخلات ، :scss المسافة البادئة و :scss لبناء جملة CSS-extension. هذا مفيد فقط عندما تقوم بإنشاء مثيلات Sass::Engine بنفسك ؛ يتم ضبطه تلقائيًا بشكل صحيح عند استخدام Sass::Plugin . افتراضيات :sass .

# property_syntax-option :property_syntax : يتم تشفير المستندات التي لها صيغة indented-syntax لاستخدام صيغة واحدة للخصائص. إذا لم يتم استخدام الصيغة الصحيحة ، يتم طرح خطأ. :new يفرض استخدام النقطتين بعد اسم الخاصية. على سبيل المثال: color: #0f3 أو width: $main_width . :old يفرض :old استخدام النقطتين قبل اسم الخاصية. على سبيل المثال:: :color #0f3 أو :width $main_width . بشكل افتراضي ، إما أن الصيغة صحيحة. هذا ليس له أي تأثير على وثائق SCSS.

# cache-option :cache : سواء يجب تخزين ملفات Sass المخزنة مؤقتًا ، مما يتيح سرعة أكبر. الافتراضي إلى صحيح.

# read_cache-option :read_cache : إذا تم ضبط هذا الإعداد و :cache لم يتم :read_cache :cache ، فقط اقرأ ذاكرة التخزين المؤقت Sass إذا كان موجودًا ، فلا تكتب إليه إذا لم يكن موجودًا.

# cache_store -خيار :cache_store : إذا تم تعيين هذا إلى مثيل فئة فرعية من Sass::CacheStores::Base ، فسيتم استخدام هذا المخزن المؤقت لتخزين واسترداد نتائج Sass::CacheStores::Base المخزنة مؤقتًا. افتراضيات إلى Sass::CacheStores::Filesystem تتم تهيئة باستخدام :cache_location .

# never_update-option :never_update : ما إذا كان يجب عدم تحديث ملفات CSS أبدًا ، حتى إذا تغير ملف القالب. تعيين هذا إلى true قد يعطي مكاسب أداء صغيرة. انها دائما افتراضية خاطئة. لها معنى داخل Rack أو Ruby on Rails أو Merb فقط.

# always_update-option :always_update : ما إذا كان يجب تحديث ملفات CSS في كل مرة يتم فيها الوصول إلى وحدة التحكم ، في مقابل فقط عند تعديل القالب. افتراضيات خاطئة. لها معنى داخل Rack أو Ruby on Rails أو Merb فقط.

# always_check-option :always_check : ما إذا كان يجب التحقق من وجود نموذج :always_check للتحديثات في كل مرة يتم فيها الوصول إلى وحدة التحكم ، في مقابل فقط عند بدء تشغيل الخادم. إذا تم تحديث قالب Sass ، فسيتم إعادة تجميعه وسيحل محل ملف CSS المقابل. افتراضات خاطئة في وضع الإنتاج ، صحيح خلاف ذلك. لها معنى داخل Rack أو Ruby on Rails أو Merb فقط.

# poll-option :poll : عندما يكون true ، استخدم دائمًا خلفية الاستقصاء لـ Sass::Plugin::Compiler#watch بدلاً من الخلفية الأصلية لنظام الملفات.

# full_exception-option :full_exception : ما إذا كان خطأ في كود Sass يجب أن يسبب Sass لتقديم وصف مفصل في ملف CSS الذي تم إنشاؤه. إذا تم تعيينه على "true" ، فسيتم عرض الخطأ مع رقم سطر ومقتطف مصدر كالتعليق في ملف CSS وفي أعلى الصفحة (في المتصفحات المدعومة). خلاف ذلك ، سيتم رفع استثناء في رمز روبي. افتراضات خاطئة في وضع الإنتاج ، صحيح خلاف ذلك.

# template_location-option :template_location : مسار إلى دليل قالب sass الجذر للتطبيق الخاص بك. إذا تم التجزئة ، :css_location يتم تجاهل :css_location هذا الخيار تعيين بين دلائل الإدخال والإخراج. يمكن أيضا أن تعطى قائمة من القوائم 2 عنصر ، بدلا من التجزئة. الإعدادات الافتراضية إلى css_location + "/sass" . لها معنى داخل Rack أو Ruby on Rails أو Merb فقط. لاحظ أنه إذا تم تحديد مواقع نماذج متعددة ، فسيتم وضع كل منها في مسار الاستيراد ، مما يسمح لك بالاستيراد بينها. لاحظ أنه نظرًا إلى العديد من التنسيقات الممكنة التي يمكن أن تتخذها ، يجب تعيين هذا الخيار فقط مباشرةً ، وليس الوصول إليه أو تعديله. استخدم Sass::Plugin#template_location_array و Sass::Plugin#add_template_location و Sass::Plugin#remove_template_location الطرق بدلا من ذلك .

# css_location-option :css_location : المسار الذي يجب كتابة إخراج CSS إليه. يتم تجاهل هذا الخيار عندما :template_location عبارة عن تجزئة. افتراضيات "./public/stylesheets" . لها معنى داخل Rack أو Ruby on Rails أو Merb فقط.

# cache_location- الخيار :cache_location : المسار حيث يجب كتابة ملفات sassc المخزنة مؤقتًا إلى. افتراضيًا إلى "./tmp/sass-cache" في Rails و Merb أو "./.sass-cache" . إذا تم تعيين :cache_location ، فسيتم تجاهل ذلك.

# unix_newlines-option :unix_newlines : إذا كان ذلك صحيحًا ، فاستخدم الخطوط الجديدة على نمط Unix عند كتابة الملفات. يحتوي المعنى فقط على Windows ، وفقط عندما يقوم Sass بكتابة الملفات (في Rack أو Rails أو Merb ، عند استخدام Sass::Plugin مباشرة ، أو عند استخدام سطر الأوامر القابل للتنفيذ).

# filename-option :filename : اسم الملف الذي يتم تقديمه. يُستخدم هذا فقط للإبلاغ عن الأخطاء ، ويتم تعيينه تلقائيًا عند استخدام Rack أو Rails أو Merb.

# line-option :line : رقم السطر الأول من قالب Sass. تستخدم لأرقام خطوط التقارير عن الأخطاء. يفيد ذلك في تعيين إذا تم تضمين قالب Sass في ملف Ruby.

# load_paths-option :load_paths : مصفوفة من مسارات الملفات أو المستوردين والتي يجب البحث فيها عن قوالب SAS التي تم استيرادها مع توجيه @import . قد تكون هذه السلاسل أو كائنات Pathname أو الفئات الفرعية لـ Sass::Importers::Base . هذا الافتراضات إلى دليل العمل ، وفي Rack أو Rails أو Merb ، أياً كان :template_location . يتم أيضاً إعلام مسار التحميل بواسطة Sass.load_paths SASS_PATH البيئة SASS_PATH .

# filesystem_importer-option :filesystem_importer : A Sass::Importers::Base subclass used to handle plain stracing loads. هذا يجب استيراد الملفات من نظام الملفات. يجب أن يكون كائن Class يرث من Sass::Importers::Base مع مُنشئ يأخذ وسيطة سلسلة واحدة (مسار التحميل). افتراضيات إلى Sass::Importers::Filesystem .

# sourcemap-option :sourcemap : تتحكم في كيفية إنشاء sourcemaps. تخبر خرائط المصدر هذه المتصفح عن كيفية العثور على أنماط Sass التي تسببت في إنشاء كل نمط CSS. يحتوي هذا على ثلاثة قيم صالحة:: يستخدم :auto ** عناوين URI نسبيًا قدر الإمكان ، على افتراض أن أوراق أنماط المصدر ستكون متاحة على أي خادم تستخدمه ، وأن موقعه النسبي سيكون هو نفسه كما هو في نظام الملفات المحلي . إذا كان URI نسبي غير متاح ، فسيتم استخدام "file:" URI بدلاً من ذلك. ** :file ** يستخدم دائمًا "file:" URIs ، والتي ستعمل محليًا ولكن لا يمكن نشرها إلى خادم بعيد. ** :inline ** يتضمن النص الكامل المصدر في sourcemap ، وهو محمول بشكل أقصى ولكن يمكنه إنشاء ملفات sourcemap كبيرة جدًا. وأخيرًا ، ** :none يؤدي أي منها إلى توليد أية مصادر برمجية على الإطلاق.

# line_numbers-option :line_numbers : عند :line_numbers إلى true ، يتسبب في رقم السطر والملف حيث يتم تعريف المحدد ليتم إرساله إلى CSS المجمعة كتعليق. مفيدة لتصحيح الأخطاء ، خاصة عند استخدام الواردات والخلطات. يمكن أيضًا :line_comments هذا الخيار :line_comments . يتم تعطيله تلقائيًا عند استخدام :compressed نمط الإخراج :compressed أو :debug_info / :trace_selectors .

# trace_selectors-option :trace_selectors : عند :trace_selectors إلى true ، :trace_selectors تتبع كامل للواردات والخلطات قبل كل محدد. يمكن أن يكون ذلك مفيدًا في تصحيح أخطاء استيراد ورقة الأنماط في المتصفح وضمها. يحل هذا الخيار محل الخيار :line_comments ويتم استبداله بواسطة :debug_info . تم تعطيله تلقائيًا عند استخدام نمط الخرج :compressed .

# debug_info-option :debug_info : عند :debug_info إلى true ، يتسبب في رقم السطر والملف حيث يتم تعريف المحدد ليتم إرساله إلى CSS المجمعة بتنسيق يمكن أن يفهمه المستعرض. مفيدة بالاشتراك مع ملحق FireSass Firebug لعرض اسم الملف ساس ورقم السطر. تم تعطيله تلقائيًا عند استخدام نمط الخرج :compressed .

# custom-option :custom : خيار متاح للتطبيقات الفردية لتعيين البيانات المتاحة لوظائف SAS المخصصة .

# quiet-option :quiet : عند التعيين إلى true ، يؤدي إلى تعطيل التحذيرات.

اختيار بناء الجملة

تستخدم أداة سطر الأوامر Sass ملحق الملف لتحديد بناء الجملة الذي تستخدمه ، ولكن لا يوجد دائمًا اسم ملف. برنامج سطر الأوامر sass افتراضية إلى بناء جملة بادئة ولكن يمكنك تمرير الخيار --scss إليه إذا يجب أن يتم تفسير الإدخال كـ بناء جملة SCSS. بدلاً من ذلك ، يمكنك استخدام برنامج سطر الأوامر scss الذي يشبه تمامًا برنامج sass إلا أنه scss افتراض أن الصيغة هي SCSS.

ترميزات

عندما يعمل على روبي 1.9 وما بعده ، يدرك ساس ترميز الأحرف للمستندات. يتبع Sass مواصفات CSS لتحديد ترميز ورقة الأنماط ، ثم يعود إلى ترميز سلسلة Ruby. وهذا يعني أنه يقوم أولاً بفحص علامة ترتيب بايت Unicode ، ثم تصريح @charset ، ثم ترميز سلسلة Ruby. إذا لم يتم تعيين أي منها ، فستفترض أن المستند في UTF-8.

لتعيين تشفير ورقة الأنماط بشكل صريح ، استخدم تصريح @charset تمامًا كما هو الحال في CSS. إضافة @charset "encoding-name"; في بداية ورقة الأنماط (قبل أي مسافة بيضاء أو تعليقات) وسيقوم Sass بترجمتها على أنها الترميز المعطى. لاحظ أن أي ترميز تستخدمه ، يجب أن يكون قابلاً للتحويل إلى Unicode.

سيعمل Sass دائمًا على ترميز الناتج باعتباره UTF-8. @charset إعلان @charset إذا وفقط إذا احتوى ملف الإخراج على أحرف غير ASCII. في الوضع المضغوط ، يتم استخدام علامة ترتيب UTF-8 البايت بدلاً من تصريح @charset .

ملحقات CSS

قواعد متداخلة

يسمح Sass بترابط قواعد CSS داخل بعضها البعض. تنطبق القاعدة الداخلية فقط داخل محدد القاعدة الخارجية. فمثلا:

#main p {
  color: #00ff00;
  width: 97%;

  .redbox {
    background-color: #ff0000;
    color: #000000;
  }
}

يتم تجميعها إلى:

#main p {
  color: #00ff00;
  width: 97%; }
  #main p .redbox {
    background-color: #ff0000;
    color: #000000; }

يساعد ذلك في تجنب تكرار محددات الأبوين ، ويجعل تخطيطات CSS المعقدة مع الكثير من المحددات المتداخلة أكثر بساطة. فمثلا:

#main {
  width: 97%;

  p, div {
    font-size: 2em;
    a { font-weight: bold; }
  }

  pre { font-size: 3em; }
}

يتم تجميعها إلى:

#main {
  width: 97%; }
  #main p, #main div {
    font-size: 2em; }
    #main p a, #main div a {
      font-weight: bold; }
  #main pre {
    font-size: 3em; }

الرجوع إلى محدد الأهل: & # parent-selector

في بعض الأحيان يكون من المفيد استخدام محدد رئيسي للمعلمة المتداخلة بطرق أخرى غير الطريقة الافتراضية. على سبيل المثال ، قد ترغب في الحصول على أنماط خاصة عندما يتم تحريك هذا المحدد أو حتى عندما يكون عنصر الجسم يحتوي على فئة معينة. في هذه الحالات ، يمكنك بشكل صريح تحديد مكان إدراج المحدد الرئيسي باستخدام الحرف & . فمثلا:

a {
  font-weight: bold;
  text-decoration: none;
  &:hover { text-decoration: underline; }
  body.firefox & { font-weight: normal; }
}

يتم تجميعها إلى:

a {
  font-weight: bold;
  text-decoration: none; }
  a:hover {
    text-decoration: underline; }
  body.firefox a {
    font-weight: normal; }

& سيتم استبداله بالمحدّد الرئيسي كما يظهر في CSS. هذا يعني أنه إذا كانت لديك قاعدة متداخلة بشكل عميق ، فسيتم حل محدد الأبوين بشكل كامل قبل الاستبدال & . فمثلا:

#main {
  color: black;
  a {
    font-weight: bold;
    &:hover { color: red; }
  }
}

يتم تجميعها إلى:

#main {
  color: black; }
  #main a {
    font-weight: bold; }
    #main a:hover {
      color: red; }

يجب أن تظهر في بداية محدد المركب ، ولكن يمكن أن يتبعها لاحقة ستتم إضافتها إلى المحدد الأصل. فمثلا:

#main {
  color: black;
  &-sidebar { border: 1px solid; }
}

يتم تجميعها إلى:

#main {
  color: black; }
  #main-sidebar {
    border: 1px solid; }

إذا كان لا يمكن تطبيق اللاحقة الأصل ، فسوف يلقي Sass خطأ.

خصائص متداخلة

يحتوي CSS على عدد غير قليل من الخصائص الموجودة في "namespaces" ؛ على سبيل المثال ، font-family font-size font-weight كلها موجودة في مساحة اسم font . في CSS ، إذا كنت تريد تعيين مجموعة من الخصائص في نفس مساحة الاسم ، يجب عليك كتابتها في كل مرة. يوفر Sass اختصارًا لهذا: فقط اكتب مساحة الاسم مرة واحدة ، ثم اعش كل من الخصائص الفرعية بداخله. فمثلا:

.funky {
  font: {
    family: fantasy;
    size: 30em;
    weight: bold;
  }
}

يتم تجميعها إلى:

.funky {
  font-family: fantasy;
  font-size: 30em;
  font-weight: bold; }

يمكن أن تحتوي مساحة اسم الخاصية نفسها أيضًا على قيمة. فمثلا:

.funky {
  font: 20px/24px fantasy {
    weight: bold;
  }
}

يتم تجميعها إلى:

.funky {
  font: 20px/24px fantasy;
    font-weight: bold;
}

محددات مكان العنصر: %foo

يدعم Sass نوعًا خاصًا من المحددات يسمى "محدد العنصر النائب". تبدو هذه مثل محددات الصف ومحددات الهوية ، باستثناء # أو . يتم استبداله بنسبة % . من المفترض أن يتم استخدامها مع توجيه @extend ؛ لمزيد من المعلومات ، راجع @extend Selectors .

من تلقاء نفسها ، دون أي استخدام @extend ، لن يتم عرض @extend القواعد التي تستخدم محددات @extend المؤقتة إلى CSS.

التعليقات: /* */ و // #comments

يدعم Sass التعليقات CSS القياسية المتعددة الخطوط مع /* */ ، بالإضافة إلى تعليقات سطر واحد مع // . يتم الاحتفاظ بالتعليقات متعددة الأسطر في مخرجات CSS حيثما أمكن ، بينما تتم إزالة تعليقات سطر واحد. فمثلا:

/* This comment is
 * several lines long.
 * since it uses the CSS comment syntax,
 * it will appear in the CSS output. */
body { color: black; }

// These comments are only one line long each.
// They won't appear in the CSS output,
// since they use the single-line comment syntax.
a { color: green; }

يتم تجميعها إلى:

/* This comment is
 * several lines long.
 * since it uses the CSS comment syntax,
 * it will appear in the CSS output. */
body {
  color: black; }

a {
  color: green; }

عندما يكون الحرف الأول من تعليق متعدد الأسطر هو ! ، سيظهر التعليق دائمًا في إخراج css حتى في أوضاع خرج مضغوطة. يفيد ذلك في إضافة إشعارات حقوق الطبع والنشر إلى CSS الخاص بك الذي تم إنشاؤه.

نظرًا لأن التعليقات متعددة الأسطر أصبحت جزءًا من CSS الناتج ، يتم حل الاستيفاء داخلها. فمثلا:

$version: "1.2.3";
/* This CSS is generated by My Snazzy Framework version #{$version}. */

يتم تجميعها إلى:

/* This CSS is generated by My Snazzy Framework version 1.2.3. */

SassScript #sassscript

بالإضافة إلى بناء جملة خاصية CSS البسيطة ، يدعم Sass مجموعة صغيرة من الإضافات تسمى SassScript. يسمح SassScript للخصائص باستخدام المتغيرات والحساب والوظائف الإضافية. يمكن استخدام SassScript في أي قيمة خاصية.

يمكن استخدام SassScript أيضًا لإنشاء محددات وأسماء مواقع ، وهو أمر مفيد عند كتابة mixins . يتم ذلك عن طريق interpolation .

شل التفاعلية

يمكنك بسهولة تجربة SassScript باستخدام الغلاف التفاعلي. لتشغيل shell قم بتشغيل سطر الأوامر sass مع الخيار -i . عند المطالبة ، أدخل أي تعبير SassScript قانوني ليتم تقييمه والنتيجة المطبوعة لك:

$ sass -i
>> "Hello, Sassy World!"
"Hello, Sassy World!"
>> 1px + 1px + 1px
3px
>> #777 + #777
#eeeeee
>> #777 + #888
white

المتغيرات: $ #variables_

الطريقة الأكثر مباشرة لاستخدام ساسكريبت هي استخدام المتغيرات. تبدأ المتغيرات بعلامات الدولار ، ويتم تعيينها مثل خصائص CSS:

$width: 5em;

يمكنك بعد ذلك الرجوع إليها في الخصائص:

#main {
  width: $width;
}

لا تتوفر المتغيرات إلا ضمن مستوى المحددات المتداخلة حيث يتم تعريفها. إذا تم تعريفهم خارج أي محددات متداخلة ، فإنهم متاحون في كل مكان. يمكن تعريفهم أيضًا بالعلامة !global ، وفي هذه الحالة تتوفر أيضًا في كل مكان. فمثلا:

#main {
  $width: 5em !global;
  width: $width;
}

#sidebar {
  width: $width;
}

يتم تجميعها إلى:

#main {
  width: 5em;
}

#sidebar {
  width: 5em;
}

لأسباب تاريخية ، يمكن لأسماء المتغيرات (وجميع معرفات Sass الأخرى) استخدام الواصلات والشرطات السفلية بالتبادل. على سبيل المثال ، إذا $main_width متغيرًا باسم $main-width ، فيمكنك الوصول إليه باعتباره $main_width ، والعكس صحيح.

أنواع البيانات

يدعم SassScript ثمانية أنواع من البيانات:

  • الأرقام (مثل 1.2 ، 13 ، 13 10px )
  • سلاسل نصية مع أو بدون علامات اقتباس (مثل "foo" أو 'bar' أو baz )
  • الألوان (على سبيل المثال ، blue ، #04a3f9 ، rgba(255, 0, 0, 0.5) )
  • booleans (على سبيل المثال ، true ، false )
  • بالقيم الخالية (على سبيل المثال null )
  • قوائم القيم ، مفصولة بمسافات أو فواصل (مثل 1.5em 1em 0 2em ، Helvetica, Arial, sans-serif )
  • الخرائط من قيمة إلى أخرى (على سبيل المثال (key1: value1, key2: value2) )
  • مراجع وظيفة

يدعم SassScript أيضًا جميع الأنواع الأخرى لقيمة خاصية CSS ، مثل نطاقات Unicode والإعلانات !important ومع ذلك ، لا توجد معالجة خاصة لهذه الأنواع. انهم يعاملون مثل السلاسل غير المتداولة.

سلاسل # sass-script-strings

يحدد CSS نوعين من السلاسل: تلك التي تحتوي على علامات اقتباس ، مثل "Lucida Grande" أو 'http://sass-lang.com' ، وتلك التي لا تحتوي على علامات اقتباس ، مثل sans-serif أو bold . يتعرف SassScript على كلا النوعين ، وبشكل عام إذا تم استخدام نوع واحد من السلسلة في وثيقة Sass ، فسيتم استخدام هذا النوع من السلسلة في CSS الناتج.

هناك استثناء واحد لهذا ، على الرغم من: عند استخدام interpolation ، فإن السلاسل المقتبسة غير متداولة. هذا يجعل من السهل استخدام مثل أسماء محدد في mixins . فمثلا:

@mixin firefox-message($selector) {
  body.firefox #{$selector}:before {
    content: "Hi, Firefox users!";
  }
}

@include firefox-message(".header");

يتم تجميعها إلى:

body.firefox .header:before {
  content: "Hi, Firefox users!"; }

قوائم

القوائم هي كيف تمثل Sass قيم إعلانات CSS مثل margin: 10px 15px 0 0 أو font-face: Helvetica, Arial, sans-serif . القوائم هي مجرد سلسلة من القيم الأخرى ، مفصولة بمسافات أو فواصل. في الواقع ، يتم حساب القيم الفردية كقوائم أيضًا: فهي مجرد قوائم تحتوي على عنصر واحد.

من تلقاء نفسها ، لا تفعل القوائم الكثير ، لكن وظائف قائمة SassScript تجعلها مفيدة. يمكن للوظيفة nth الوصول إلى العناصر الموجودة في القائمة ، ويمكن أن تنضم وظيفة الربط إلى قوائم متعددة معًا ، ويمكن لوظيفة append إضافة عناصر إلى القوائم. يمكن أيضًا أن يضيف توجيه @each أنماطًا لكل عنصر في قائمة.

بالإضافة إلى احتوائها على قيم بسيطة ، يمكن أن تحتوي القوائم على قوائم أخرى. على سبيل المثال ، 1px 2px, 5px 6px عبارة عن قائمة تتكون من عنصرين تحتوي على القائمة 1px 2px والقائمة 5px 6px . إذا كانت القوائم الداخلية لها نفس الفاصل مثل القائمة الخارجية ، فستحتاج إلى استخدام الأقواس لتوضيح مكان بدء القوائم الداخلية وإيقافها. على سبيل المثال ، (1px 2px) (5px 6px) هي أيضًا قائمة تتكون من عنصرين تحتوي على القائمة 1px 2px والقائمة 5px 6px . والفرق هو أن القائمة الخارجية مفصولة في الفضاء ، حيث كانت قبل فصلها بفواصل.

عندما يتم تحويل القوائم إلى CSS عادي ، لا يضيف Sass أي أقواس ، لأن CSS لا تفهمها. وهذا يعني أنه (1px 2px) (5px 6px) و 1px 2px 5px 6px عندما يصبحان CSS. ومع ذلك ، فهي ليست هي نفسها عندما تكون ساس: الأول هو قائمة تحتوي على قائمتين ، في حين أن الثانية هي قائمة تحتوي على أربعة أرقام.

لا يمكن أن تحتوي القوائم على أي عناصر فيها على الإطلاق. يتم تمثيل هذه القوائم كـ () (وهي أيضًا map فارغة). لا يمكن إخراجها مباشرة إلى CSS ؛ إذا حاولت القيام به على سبيل المثال font-family: () ، فسوف يثير Sass خطأ. إذا كانت القائمة تحتوي على قوائم فارغة أو قيم فارغة ، كما هو الحال في 1px 2px () 3px أو 1px 2px null 3px ، ستتم إزالة القوائم الفارغة والقيم الخالية قبل أن يتم تحويل القائمة التي تحتوي عليها إلى CSS.

قد تحتوي الفواصل المفصولة بفواصل على فاصلة زائدة. هذا مفيد بشكل خاص لأنه يسمح لك بتمثيل قائمة عنصر واحد. على سبيل المثال ، (1,) هي قائمة تحتوي على 1 و (1 2 3,) هي قائمة مفصولة بفواصل تحتوي على قائمة مفصولة بمسافات تحتوي على 1 و 2 و 3 .

القوائم الموضوعة بين قوسين

يمكن كتابة القوائم أيضًا بأقواس مربعة — نسمي هذه القوائم الموضوعة بين أقواس. يتم استخدام القوائم الموضوعة بين قوسين كأسماء سطر في CSS Grid Layout ، ولكن يمكن استخدامها أيضًا في كود Sass تمامًا مثل أي قائمة أخرى. يمكن أن تكون القوائم الموضوعة بين قوسين مفصولة بفواصل أو مسافات.

خرائط

تمثل الخرائط ارتباطًا بين المفاتيح والقيم ، حيث يتم استخدام المفاتيح للبحث عن القيم. فهي تسهل جمع القيم في مجموعات مسماة والوصول إلى هذه المجموعات بشكل دينامي. ليس لها أي تباين مباشر في CSS ، على الرغم من أنها متشابهة في الجمل مع تعبيرات استعلام الوسائط:

$map: (key1: value1, key2: value2, key3: value3);

على عكس القوائم ، يجب دائمًا أن تكون الخرائط محاطة بأقواس ويجب أن يتم فصلها بفواصل. يمكن أن يكون كل من المفاتيح والقيم في الخرائط أي كائن SassScript. قد تحتوي الخريطة على قيمة واحدة فقط مرتبطة بمفتاح معين (على الرغم من أن هذه القيمة قد تكون قائمة). ومع ذلك ، قد ترتبط قيمة معينة بالعديد من المفاتيح.

مثل القوائم ، تتم معالجة الخرائط في الغالب باستخدام وظائف SassScript . تبحث وظيفة map-get عن قيم في الخريطة وتضيف وظيفة map-merge القيم إلى خريطة. يمكن استخدام توجيه @each لإضافة أنماط لكل زوج مفتاح / قيمة في الخريطة. دائمًا ما يكون ترتيب الأزواج في الخريطة كما هو عند إنشاء الخريطة.

يمكن أيضًا استخدام الخرائط في أي مكان يمكن للقوائم. عند استخدامها من خلال وظيفة قائمة ، يتم التعامل مع الخريطة كقائمة من الأزواج. على سبيل المثال ، سيتم التعامل مع (key1: value1, key2: value2) كقيمة key1 value1, key2 value2 المتداخلة key1 value1, key2 value2 بواسطة وظائف القائمة. لا يمكن التعامل مع القوائم كخرائط ، مع ذلك ، باستثناء القائمة الفارغة. () تمثل خريطة مع عدم وجود أزواج مفاتيح / قيم وقائمة لا تحتوي على عناصر.

لاحظ أن مفاتيح الخريطة يمكن أن تكون أي نوع بيانات Sass (حتى خريطة أخرى) وبناء الجملة لإعلان الخريطة يسمح بالتعبيرات التعسفية SassScript التي سيتم تقييمها لتحديد المفتاح.

لا يمكن تحويل الخرائط إلى CSS عادي. استخدام واحد كقيمة لمتغير أو وسيطة إلى وظيفة CSS سيؤدي إلى حدوث خطأ. استخدم الدالة inspect($value) لإنتاج سلسلة إخراج مفيدة لتصحيح الأخطاء في الخرائط.

الألوان

أي تعبير لون CSS بإرجاع قيمة SassScript Color. يتضمن ذلك عددًا كبيرًا من الألوان المسماة التي لا يمكن تمييزها عن السلاسل غير المتداولة.

في وضع الإخراج المضغوط ، سينتج Sass أصغر تمثيل CSS للون. على سبيل المثال ، سيتم إخراج #FF0000 red في الوضع المضغوط ، ولكن سيتم إخراج blanchedalmond كـ #FFEBCD .

من المشكلات الشائعة التي يواجهها المستخدمون مع الألوان المسماة أنه نظرًا لأن Sass يفضّل تنسيق الإخراج نفسه كما تمت كتابته في أوضاع خرج أخرى ، فإن اللون المحوّل إلى محدد سيصبح بناء غير صالح عند ضغطه. لتجنب ذلك ، اقتبس دائماً الألوان المسماة إذا كان من المفترض استخدامها في بناء محدد.

وظائف من الدرجة الأولى

يتم إرجاع مرجع دالة بواسطة get-function($function-name) . يمكن تمرير الدالة call($function, $args...) وسيتم استدعاء الدالة التي تشير إليها. لا يمكن استخدام وظائف الدرجة الأولى مباشرة كمخرج CSS وأي محاولة للقيام بذلك ستؤدي إلى حدوث خطأ.

عمليات

جميع أنواع دعم عمليات المساواة ( == و != ). بالإضافة إلى ذلك ، كل نوع له عملياته الخاصة به دعم خاص لـ.

عمليات الرقم

يدعم SassScript العمليات الحسابية القياسية على الأرقام (إضافة + ، والطرح - ، الضرب * ، القسمة / ، و modulo % ). وظائف ساس الرياضية تحفظ الوحدات أثناء العمليات الحسابية. هذا يعني أنه ، كما هو الحال في الحياة الواقعية ، لا يمكنك العمل على الأرقام بوحدات غير متوافقة (مثل إضافة رقم مع px و em ) وسيؤدي 10px * 10px == 100px * px بنفس الوحدة مضروبًا معاً إلى إنتاج وحدات مربعة ( 10px * 10px == 100px * px ). كن على علم بأن px * px هي وحدة CSS غير صالحة وستحصل على خطأ من Sass لمحاولة استخدام وحدات غير صالحة في CSS.

يتم أيضًا دعم العوامل العلائقية ( < ، > ، <= ، >= ) للأرقام ، ويتم دعم عوامل المساواة ( == ، != ) لجميع الأنواع.

الشعبة و /

# تقسيم ومائلة

يتيح CSS / الظهور في قيم الخاصية كطريقة لفصل الأرقام. بما أن SassScript هو امتداد لبنية خاصية CSS ، فيجب أن يدعم هذا ، بينما يسمح / يتم استخدامه للقسم. هذا يعني أنه افتراضياً ، إذا تم فصل رقمين بواسطة / في SassScript ، فسيظهران بهذه الطريقة في CSS الناتج.

ومع ذلك ، هناك ثلاث حالات حيث سيتم تفسير / على أنه قسمة. هذه تغطي الغالبية العظمى من الحالات التي يتم فيها استخدام التقسيم بالفعل. هم انهم:

  1. إذا تم تخزين القيمة ، أو أي جزء منها ، في متغير أو إعادتها بواسطة إحدى الوظائف.
  2. إذا كانت القيمة محاطة بأقواس ، ما لم تكن تلك الأقواس خارج قائمة والقيمة داخلها.
  3. إذا تم استخدام القيمة كجزء من تعبير حسابي آخر.

فمثلا:

p {
  font: 10px/8px;             // Plain CSS, no division
  $width: 1000px;
  width: $width/2;            // Uses a variable, does division
  width: round(1.5)/2;        // Uses a function, does division
  height: (500px/2);          // Uses parentheses, does division
  margin-left: 5px + 8px/2px; // Uses +, does division
  font: (italic bold 10px/8px); // In a list, parentheses don't count
}

يتم تجميعها إلى:

p {
  font: 10px/8px;
  width: 500px;
  height: 250px;
  margin-left: 9px; }

إذا كنت ترغب في استخدام المتغيرات مع CSS عادي ، يمكنك استخدام #{} لإدراجها. فمثلا:

p {
  $font-size: 12px;
  $line-height: 30px;
  font: #{$font-size}/#{$line-height};
}

يتم تجميعها إلى:

p {
  font: 12px/30px; }
الطرح والأرقام السلبية و-

#subtraction

هناك عدد من الأشياء المختلفة - يمكن أن تعني في CSS و Sass. يمكن أن يكون عامل -3px (كما هو الحال في 5px - 3px ) ، بداية رقم سالب (كما في -3px ) ، مشغل -3px وحيد (كما في -$var ) ، أو جزء من معرف (كما هو الحال في font-weight ). في معظم الأحيان ، من الواضح ما هو الذي ، ولكن هناك بعض الحالات الصعبة. كقاعدة عامة ، فأنت أكثر أمانًا إذا:

  • يمكنك دائمًا تضمين مسافات على جانبي - عند الطرح.
  • يمكنك تضمين مسافة قبل - ولكن ليس بعد رقم سلبي أو نفي وحيد.
  • يمكنك التفاف نكر غير عادي بين قوسين إذا كان في قائمة مفصولة 10px (-$var) ، كما هو الحال في 10px (-$var) .

معاني مختلفة - تأخذ الأسبقية بالترتيب التالي:

  1. أ - كجزء من معرف. هذا يعني أن a-1 عبارة عن سلسلة غير متوقعة بقيمة "a-1" . الاستثناء الوحيد هو الوحدات. يسمح Sass عادةً باستخدام أي معرّف صالح كمعرّف ، ولكن قد لا تحتوي المعرّفات على واصلة متبوعة برقم. هذا يعني أن 5px-3px هو نفسه 5px - 3px .

  2. أ - بين رقمين بلا فراغ. يشير هذا إلى الطرح ، بحيث يكون 1-2 هو نفس 1 - 2 .

  3. أ - في بداية العدد الحرفي. يشير هذا إلى رقم سالب ، لذلك 1 -2 هي قائمة تحتوي على 1 و -2 .

  4. أ - بين رقمين بغض النظر عن المسافة البيضاء. هذا يشير إلى الطرح ، لذا 1 -$var هي نفس 1 - $var .

  5. أ - قبل القيمة. يشير هذا إلى عامل النفي الأحادي ؛ بمعنى أن المشغل يأخذ رقم ويعيد سلبي.

عمليات اللون

ويدعم جميع العمليات الحسابية لقيم اللون ، حيث تعمل بشكل قطعة. هذا يعني أن العملية تتم على المكونات الحمراء والخضراء والزرقاء بدورها. فمثلا:

p {
  color: #010203 + #040506;
}

يحسب 01 + 04 = 05 و 02 + 05 = 07 و 03 + 06 = 09 ، ويتم تجميعها إلى:

p {
  color: #050709; }

في كثير من الأحيان يكون من الأفضل استخدام وظائف الألوان بدلاً من محاولة استخدام حساب اللون لتحقيق نفس التأثير.

Arithmetic operations also work between numbers and colors, also piecewise. فمثلا:

p {
  color: #010203 * 2;
}

computes 01 * 2 = 02 , 02 * 2 = 04 , and 03 * 2 = 06 , and is compiled to:

p {
  color: #020406; }

Note that colors with an alpha channel (those created with the rgba or hsla functions) must have the same alpha value in order for color arithmetic to be done with them. The arithmetic doesn't affect the alpha value. فمثلا:

p {
  color: rgba(255, 0, 0, 0.75) + rgba(0, 255, 0, 0.75);
}

is compiled to:

p {
  color: rgba(255, 255, 0, 0.75); }

The alpha channel of a color can be adjusted using the opacify and transparentize functions. فمثلا:

$translucent-red: rgba(255, 0, 0, 0.5);
p {
  color: opacify($translucent-red, 0.3);
  background-color: transparentize($translucent-red, 0.25);
}

is compiled to:

p {
  color: rgba(255, 0, 0, 0.8);
  background-color: rgba(255, 0, 0, 0.25); }

IE filters require all colors include the alpha layer, and be in the strict format of #AABBCCDD. You can more easily convert the color using the ie_hex_str function. فمثلا:

$translucent-red: rgba(255, 0, 0, 0.5);
$green: #00ff00;
div {
  filter: progid:DXImageTransform.Microsoft.gradient(enabled='false', startColorstr='#{ie-hex-str($green)}', endColorstr='#{ie-hex-str($translucent-red)}');
}

is compiled to:

div {
  filter: progid:DXImageTransform.Microsoft.gradient(enabled='false', startColorstr=#FF00FF00, endColorstr=#80FF0000);
}

String Operations

The + operation can be used to concatenate strings:

p {
  cursor: e + -resize;
}

is compiled to:

p {
  cursor: e-resize; }

Note that if a quoted string is added to an unquoted string (that is, the quoted string is to the left of the + ), the result is a quoted string. Likewise, if an unquoted string is added to a quoted string (the unquoted string is to the left of the + ), the result is an unquoted string. فمثلا:

p:before {
  content: "Foo " + Bar;
  font-family: sans- + "serif";
}

is compiled to:

p:before {
  content: "Foo Bar";
  font-family: sans-serif; }

By default, if two values are placed next to one another, they are concatenated with a space:

p {
  margin: 3px + 4px auto;
}

is compiled to:

p {
  margin: 7px auto; }

Within a string of text, #{} style interpolation can be used to place dynamic values within the string:

p:before {
  content: "I ate #{5 + 10} pies!";
}

is compiled to:

p:before {
  content: "I ate 15 pies!"; }

Null values are treated as empty strings for string interpolation:

$value: null;
p:before {
  content: "I ate #{$value} pies!";
}

is compiled to:

p:before {
  content: "I ate  pies!"; }

Boolean Operations

SassScript supports and , or , and not operators for boolean values.

List Operations

Lists don't support any special operations. Instead, they're manipulated using the list functions .

Parentheses

Parentheses can be used to affect the order of operations:

p {
  width: 1em + (2em * 3);
}

is compiled to:

p {
  width: 7em; }

المهام

SassScript defines some useful functions that are called using the normal CSS function syntax:

p {
  color: hsl(0, 100%, 50%);
}

is compiled to:

p {
  color: #ff0000; }

See this page for a full list of available functions.

وسيطات الكلمات الرئيسية

Sass functions can also be called using explicit keyword arguments. The above example can also be written as:

p {
  color: hsl($hue: 0, $saturation: 100%, $lightness: 50%);
}

While this is less concise, it can make the stylesheet easier to read. It also allows functions to present more flexible interfaces, providing many arguments without becoming difficult to call.

Named arguments can be passed in any order, and arguments with default values can be omitted. Since the named arguments are variable names, underscores and dashes can be used interchangeably.

See Sass::Script::Functions for a full listing of Sass functions and their argument names, as well as instructions on defining your own in Ruby.

Interpolation: #{}

#interpolation_

You can also use SassScript variables in selectors and property names using #{} interpolation syntax:

$name: foo;
$attr: border;
p.#{$name} {
  #{$attr}-color: blue;
}

is compiled to:

p.foo {
  border-color: blue; }

It's also possible to use #{} to put SassScript into property values. In most cases this isn't any better than using a variable, but using #{} does mean that any operations near it will be treated as plain CSS. فمثلا:

p {
  $font-size: 12px;
  $line-height: 30px;
  font: #{$font-size}/#{$line-height};
}

is compiled to:

p {
  font: 12px/30px; }

& in SassScript #parent-script

Just like when it's used in selectors , & in SassScript refers to the current parent selector. It's a comma-separated list of space-separated lists. فمثلا:

.foo.bar .baz.bang, .bip.qux {
  $selector: &;
}

The value of $selector is now ((".foo.bar" ".baz.bang"), ".bip.qux") . The compound selectors are quoted here to indicate that they're strings, but in reality they would be unquoted. Even if the parent selector doesn't contain a comma or a space, & will always have two levels of nesting, so it can be accessed consistently.

If there is no parent selector, the value of & will be null. This means you can use it in a mixin to detect whether a parent selector exists:

@mixin does-parent-exist {
  @if & {
    &:hover {
      color: red;
    }
  } @else {
    a {
      color: red;
    }
  }
}

Variable Defaults: !default

You can assign to variables if they aren't already assigned by adding the !default flag to the end of the value. This means that if the variable has already been assigned to, it won't be re-assigned, but if it doesn't have a value yet, it will be given one.

فمثلا:

$content: "First content";
$content: "Second content?" !default;
$new_content: "First time reference" !default;

#main {
  content: $content;
  new-content: $new_content;
}

is compiled to:

#main {
  content: "First content";
  new-content: "First time reference"; }

Variables with null values are treated as unassigned by !default:

$content: null;
$content: "Non-null content" !default;

#main {
  content: $content;
}

is compiled to:

#main {
  content: "Non-null content"; }

@ -Rules and Directives #directives

Sass supports all CSS3 @ -rules, as well as some additional Sass-specific ones known as "directives." These have various effects in Sass, detailed below. See also control directives and mixins .

@import #import

Sass extends the CSS @import rule to allow it to import SCSS and Sass files. All imported SCSS and Sass files will be merged together into a single CSS output file. In addition, any variables or mixins defined in imported files can be used in the main file.

Sass looks for other Sass files in the current directory, and the Sass file directory under Rack, Rails, or Merb. Additional search directories may be specified using the :load_paths option, or the --load-path option on the command line.

@import takes a filename to import. By default, it looks for a Sass file to import directly, but there are a few circumstances under which it will compile to a CSS @import rule:

  • If the file's extension is .css .
  • If the filename begins with http:// .
  • If the filename is a url() .
  • If the @import has any media queries.

If none of the above conditions are met and the extension is .scss or .sass , then the named Sass or SCSS file will be imported. If there is no extension, Sass will try to find a file with that name and the .scss or .sass extension and import it.

فمثلا،

@import "foo.scss";

أو

@import "foo";

would both import the file foo.scss , whereas

@import "foo.css";
@import "foo" screen;
@import "http://foo.com/bar";
@import url(foo);

would all compile to

@import "foo.css";
@import "foo" screen;
@import "http://foo.com/bar";
@import url(foo);

It's also possible to import multiple files in one @import . فمثلا:

@import "rounded-corners", "text-shadow";

would import both the rounded-corners and the text-shadow files.

Imports may contain #{} interpolation, but only with certain restrictions. It's not possible to dynamically import a Sass file based on a variable; interpolation is only for CSS imports. As such, it only works with url() imports. فمثلا:

$family: unquote("Droid+Sans");
@import url("http://fonts.googleapis.com/css?family=#{$family}");

would compile to

@import url("http://fonts.googleapis.com/css?family=Droid+Sans");

Partials #partials

If you have a SCSS or Sass file that you want to import but don't want to compile to a CSS file, you can add an underscore to the beginning of the filename. This will tell Sass not to compile it to a normal CSS file. You can then import these files without using the underscore.

For example, you might have _colors.scss . Then no _colors.css file would be created, and you can do

@import "colors";

and _colors.scss would be imported.

Note that you may not include a partial and a non-partial with the same name in the same directory. For example, _colors.scss may not exist alongside colors.scss .

Nested @import #nested-import

Although most of the time it's most useful to just have @import s at the top level of the document, it is possible to include them within CSS rules and @media rules. Like a base-level @import , this includes the contents of the @import ed file. However, the imported rules will be nested in the same place as the original @import .

For example, if example.scss contains

.example {
  color: red;
}

ثم

#main {
  @import "example";
}

would compile to

#main .example {
  color: red;
}

Directives that are only allowed at the base level of a document, like @mixin or @charset , are not allowed in files that are @import ed in a nested context.

It's not possible to nest @import within mixins or control directives.

@media #media

@media directives in Sass behave just like they do in plain CSS, with one extra capability: they can be nested in CSS rules. If a @media directive appears within a CSS rule, it will be bubbled up to the top level of the stylesheet, putting all the selectors on the way inside the rule. This makes it easy to add media-specific styles without having to repeat selectors or break the flow of the stylesheet. فمثلا:

.sidebar {
  width: 300px;
  @media screen and (orientation: landscape) {
    width: 500px;
  }
}

is compiled to:

.sidebar {
  width: 300px; }
  @media screen and (orientation: landscape) {
    .sidebar {
      width: 500px; } }

@media queries can also be nested within one another. The queries will then be combined using the and operator. فمثلا:

@media screen {
  .sidebar {
    @media (orientation: landscape) {
      width: 500px;
    }
  }
}

is compiled to:

@media screen and (orientation: landscape) {
  .sidebar {
    width: 500px; } }

Finally, @media queries can contain SassScript expressions (including variables, functions, and operators) in place of the feature names and feature values. فمثلا:

$media: screen;
$feature: -webkit-min-device-pixel-ratio;
$value: 1.5;

@media #{$media} and ($feature: $value) {
  .sidebar {
    width: 500px;
  }
}

is compiled to:

@media screen and (-webkit-min-device-pixel-ratio: 1.5) {
  .sidebar {
    width: 500px; } }

@extend #extend

There are often cases when designing a page when one class should have all the styles of another class, as well as its own specific styles. The most common way of handling this is to use both the more general class and the more specific class in the HTML. For example, suppose we have a design for a normal error and also for a serious error. We might write our markup like so:

<div class="error seriousError">
  Oh no! You've been hacked!
</div>

And our styles like so:

.error {
  border: 1px #f00;
  background-color: #fdd;
}
.seriousError {
  border-width: 3px;
}

Unfortunately, this means that we have to always remember to use .error with .seriousError . This is a maintenance burden, leads to tricky bugs, and can bring non-semantic style concerns into the markup.

The @extend directive avoids these problems by telling Sass that one selector should inherit the styles of another selector. فمثلا:

.error {
  border: 1px #f00;
  background-color: #fdd;
}
.seriousError {
  @extend .error;
  border-width: 3px;
}

is compiled to:

.error, .seriousError {
  border: 1px #f00;
  background-color: #fdd;
}

.seriousError {
  border-width: 3px;
}

This means that all styles defined for .error are also applied to .seriousError , in addition to the styles specific to .seriousError . In effect, every element with class .seriousError also has class .error .

Other rules that use .error will work for .seriousError as well. For example, if we have special styles for errors caused by hackers:

.error.intrusion {
  background-image: url("/image/hacked.png");
}

Then <div class="seriousError intrusion"> will have the hacked.png background image as well.

كيف تعمل

@extend works by inserting the extending selector (eg .seriousError ) anywhere in the stylesheet that the extended selector (.eg .error ) appears. Thus the example above:

.error {
  border: 1px #f00;
  background-color: #fdd;
}
.error.intrusion {
  background-image: url("/image/hacked.png");
}
.seriousError {
  @extend .error;
  border-width: 3px;
}

is compiled to:

.error, .seriousError {
  border: 1px #f00;
  background-color: #fdd; }

.error.intrusion, .seriousError.intrusion {
  background-image: url("/image/hacked.png"); }

.seriousError {
  border-width: 3px; }

When merging selectors, @extend is smart enough to avoid unnecessary duplication, so something like .seriousError.seriousError gets translated to .seriousError . In addition, it won't produce selectors that can't match anything, like #main#footer .

Extending Complex Selectors

Class selectors aren't the only things that can be extended. It's possible to extend any selector involving only a single element, such as .special.cool , a:hover , or a.user[href^="http://"] . فمثلا:

.hoverlink {
  @extend a:hover;
}

Just like with classes, this means that all styles defined for a:hover are also applied to .hoverlink . فمثلا:

.hoverlink {
  @extend a:hover;
}
a:hover {
  text-decoration: underline;
}

is compiled to:

a:hover, .hoverlink {
  text-decoration: underline; }

Just like with .error.intrusion above, any rule that uses a:hover will also work for .hoverlink , even if they have other selectors as well. فمثلا:

.hoverlink {
  @extend a:hover;
}
.comment a.user:hover {
  font-weight: bold;
}

is compiled to:

.comment a.user:hover, .comment .user.hoverlink {
  font-weight: bold; }

Multiple Extends

A single selector can extend more than one selector. This means that it inherits the styles of all the extended selectors. فمثلا:

.error {
  border: 1px #f00;
  background-color: #fdd;
}
.attention {
  font-size: 3em;
  background-color: #ff0;
}
.seriousError {
  @extend .error;
  @extend .attention;
  border-width: 3px;
}

is compiled to:

.error, .seriousError {
  border: 1px #f00;
  background-color: #fdd; }

.attention, .seriousError {
  font-size: 3em;
  background-color: #ff0; }

.seriousError {
  border-width: 3px; }

In effect, every element with class .seriousError also has class .error and class .attention . Thus, the styles defined later in the document take precedence: .seriousError has background color #ff0 rather than #fdd , since .attention is defined later than .error .

Multiple extends can also be written using a comma-separated list of selectors. For example, @extend .error, .attention is the same as @extend .error; @extend .attention .

Chaining Extends

It's possible for one selector to extend another selector that in turn extends a third. فمثلا:

.error {
  border: 1px #f00;
  background-color: #fdd;
}
.seriousError {
  @extend .error;
  border-width: 3px;
}
.criticalError {
  @extend .seriousError;
  position: fixed;
  top: 10%;
  bottom: 10%;
  left: 10%;
  right: 10%;
}

Now everything with class .seriousError also has class .error , and everything with class .criticalError has class .seriousError and class .error . It's compiled to:

.error, .seriousError, .criticalError {
  border: 1px #f00;
  background-color: #fdd; }

.seriousError, .criticalError {
  border-width: 3px; }

.criticalError {
  position: fixed;
  top: 10%;
  bottom: 10%;
  left: 10%;
  right: 10%; }

Selector Sequences

Selector sequences, such as .foo .bar or .foo + .bar , currently can't be extended. However, it is possible for nested selectors themselves to use @extend . فمثلا:

#fake-links .link {
  @extend a;
}

a {
  color: blue;
  &:hover {
    text-decoration: underline;
  }
}

is compiled to

a, #fake-links .link {
  color: blue; }
  a:hover, #fake-links .link:hover {
    text-decoration: underline; }
Merging Selector Sequences

Sometimes a selector sequence extends another selector that appears in another sequence. In this case, the two sequences need to be merged. فمثلا:

#admin .tabbar a {
  font-weight: bold;
}
#demo .overview .fakelink {
  @extend a;
}

While it would technically be possible to generate all selectors that could possibly match either sequence, this would make the stylesheet far too large. The simple example above, for instance, would require ten selectors. Instead, Sass generates only selectors that are likely to be useful.

When the two sequences being merged have no selectors in common, then two new selectors are generated: one with the first sequence before the second, and one with the second sequence before the first. فمثلا:

#admin .tabbar a {
  font-weight: bold;
}
#demo .overview .fakelink {
  @extend a;
}

is compiled to:

#admin .tabbar a,
#admin .tabbar #demo .overview .fakelink,
#demo .overview #admin .tabbar .fakelink {
  font-weight: bold; }

If the two sequences do share some selectors, then those selectors will be merged together and only the differences (if any still exist) will alternate. In this example, both sequences contain the id #admin , so the resulting selectors will merge those two ids:

#admin .tabbar a {
  font-weight: bold;
}
#admin .overview .fakelink {
  @extend a;
}

This is compiled to:

#admin .tabbar a,
#admin .tabbar .overview .fakelink,
#admin .overview .tabbar .fakelink {
  font-weight: bold; }

@extend -Only Selectors #placeholders

Sometimes you'll write styles for a class that you only ever want to @extend , and never want to use directly in your HTML. This is especially true when writing a Sass library, where you may provide styles for users to @extend if they need and ignore if they don't.

If you use normal classes for this, you end up creating a lot of extra CSS when the stylesheets are generated, and run the risk of colliding with other classes that are being used in the HTML. That's why Sass supports "placeholder selectors" (for example, %foo ).

Placeholder selectors look like class and id selectors, except the # or . is replaced by % . They can be used anywhere a class or id could, and on their own they prevent rulesets from being rendered to CSS. فمثلا:

// This ruleset won't be rendered on its own.
#context a%extreme {
  color: blue;
  font-weight: bold;
  font-size: 2em;
}

However, placeholder selectors can be extended, just like classes and ids. The extended selectors will be generated, but the base placeholder selector will not. فمثلا:

.notice {
  @extend %extreme;
}

Is compiled to:

#context a.notice {
  color: blue;
  font-weight: bold;
  font-size: 2em; }

The !optional Flag

Normally when you extend a selector, it's an error if that @extend doesn't work. For example, if you write a.important {@extend .notice} , it's an error if there are no selectors that contain .notice . It's also an error if the only selector containing .notice is h1.notice , since h1 conflicts with a and so no new selector would be generated.

Sometimes, though, you want to allow an @extend not to produce any new selectors. To do so, just add the !optional flag after the selector. فمثلا:

a.important {
  @extend .notice !optional;
}

@extend in Directives

There are some restrictions on the use of @extend within directives such as @media . Sass is unable to make CSS rules outside of the @media block apply to selectors inside it without creating a huge amount of stylesheet bloat by copying styles all over the place. This means that if you use @extend within @media (or other CSS directives), you may only extend selectors that appear within the same directive block.

For example, the following works fine:

@media print {
  .error {
    border: 1px #f00;
    background-color: #fdd;
  }
  .seriousError {
    @extend .error;
    border-width: 3px;
  }
}

But this is an error:

.error {
  border: 1px #f00;
  background-color: #fdd;
}

@media print {
  .seriousError {
    // INVALID EXTEND: .error is used outside of the "@media print" directive
    @extend .error;
    border-width: 3px;
  }
}

Someday we hope to have @extend supported natively in the browser, which will allow it to be used within @media and other directives.

@at-root #at-root

The @at-root directive causes one or more rules to be emitted at the root of the document, rather than being nested beneath their parent selectors. It can either be used with a single inline selector:

.parent {
  ...
  @at-root .child { ... }
}

Which would produce:

.parent { ... }
.child { ... }

Or it can be used with a block containing multiple selectors:

.parent {
  ...
  @at-root {
    .child1 { ... }
    .child2 { ... }
  }
  .step-child { ... }
}

Which would output the following:

.parent { ... }
.child1 { ... }
.child2 { ... }
.parent .step-child { ... }

@at-root (without: ...) and @at-root (with: ...)

By default, @at-root just excludes selectors. However, it's also possible to use @at-root to move outside of nested directives such as @media as well. فمثلا:

@media print {
  .page {
    width: 8in;
    @at-root (without: media) {
      color: red;
    }
  }
}

ينتج عنه:

@media print {
  .page {
    width: 8in;
  }
}
.page {
  color: red;
}

You can use @at-root (without: ...) to move outside of any directive. You can also do it with multiple directives separated by a space: @at-root (without: media supports) moves outside of both @media and @supports queries.

There are two special values you can pass to @at-root . "rule" refers to normal CSS rules; @at-root (without: rule) is the same as @at-root with no query. @at-root (without: all) means that the styles should be moved outside of all directives and CSS rules.

If you want to specify which directives or rules to include, rather than listing which ones should be excluded, you can use with instead of without . For example, @at-root (with: rule) will move outside of all directives, but will preserve any CSS rules.

@debug

The @debug directive prints the value of a SassScript expression to the standard error output stream. It's useful for debugging Sass files that have complicated SassScript going on. فمثلا:

@debug 10em + 12em;

المخرجات:

Line 1 DEBUG: 22em

@warn

The @warn directive prints the value of a SassScript expression to the standard error output stream. It's useful for libraries that need to warn users of deprecations or recovering from minor mixin usage mistakes. There are two major distinctions between @warn and @debug :

  1. You can turn warnings off with the --quiet command-line option or the :quiet Sass option.
  2. A stylesheet trace will be printed out along with the message so that the user being warned can see where their styles caused the warning.

مثال على الاستخدام:

@mixin adjust-location($x, $y) {
  @if unitless($x) {
    @warn "Assuming #{$x} to be in pixels";
    $x: 1px * $x;
  }
  @if unitless($y) {
    @warn "Assuming #{$y} to be in pixels";
    $y: 1px * $y;
  }
  position: relative; left: $x; top: $y;
}

@error

The @error directive throws the value of a SassScript expression as a fatal error, including a nice stack trace. It's useful for validating arguments to mixins and functions. فمثلا:

@mixin adjust-location($x, $y) {
  @if unitless($x) {
    @error "$x may not be unitless, was #{$x}.";
  }
  @if unitless($y) {
    @error "$y may not be unitless, was #{$y}.";
  }
  position: relative; left: $x; top: $y;
}

There is currently no way to catch errors.

Control Directives & Expressions

SassScript supports basic control directives and expressions for including styles only under some conditions or including the same style several times with variations.

Note: Control directives are an advanced feature, and are uncommon in day-to-day styling. They exist mainly for use in mixins , particularly those that are part of libraries like Compass , and so require substantial flexibility.

if()

The built-in if() function allows you to branch on a condition and returns only one of two possible outcomes. It can be used in any script context. The if function only evaluates the argument corresponding to the one that it will return -- this allows you to refer to variables that may not be defined or to have calculations that would otherwise cause an error (Eg divide by zero).

if(true, 1px, 2px) => 1px
if(false, 1px, 2px) => 2px

@if

The @if directive takes a SassScript expression and uses the styles nested beneath it if the expression returns anything other than false or null :

p {
  @if 1 + 1 == 2 { border: 1px solid;  }
  @if 5 < 3      { border: 2px dotted; }
  @if null       { border: 3px double; }
}

is compiled to:

p {
  border: 1px solid; }

You can explicitly test for $var == false or $var == null if you want to distinguish between these.

The @if statement can be followed by several @else if statements and one @else statement. If the @if statement fails, the @else if statements are tried in order until one succeeds or the @else is reached. فمثلا:

$type: monster;
p {
  @if $type == ocean {
    color: blue;
  } @else if $type == matador {
    color: red;
  } @else if $type == monster {
    color: green;
  } @else {
    color: black;
  }
}

is compiled to:

p {
  color: green; }

@for

The @for directive repeatedly outputs a set of styles. For each repetition, a counter variable is used to adjust the output. The directive has two forms: @for $var from <start> through <end> and @for $var from <start> to <end> . Note the difference in the keywords through and to . $var can be any variable name, like $i ; <start> and <end> are SassScript expressions that should return integers. When <start> is greater than <end> the counter will decrement instead of increment.

The @for statement sets $var to each successive number in the specified range and each time outputs the nested styles using that value of $var . For the form from ... through , the range includes the values of <start> and <end> , but the form from ... to runs up to but not including the value of <end> . Using the through syntax,

@for $i from 1 through 3 {
  .item-#{$i} { width: 2em * $i; }
}

is compiled to:

.item-1 {
  width: 2em; }
.item-2 {
  width: 4em; }
.item-3 {
  width: 6em; }

@each #each-directive

The @each directive usually has the form @each $var in <list or map> . $var can be any variable name, like $length or $name , and <list or map> is a SassScript expression that returns a list or a map.

The @each rule sets $var to each item in the list or map, then outputs the styles it contains using that value of $var . فمثلا:

@each $animal in puma, sea-slug, egret, salamander {
  .#{$animal}-icon {
    background-image: url('/images/#{$animal}.png');
  }
}

is compiled to:

.puma-icon {
  background-image: url('/images/puma.png'); }
.sea-slug-icon {
  background-image: url('/images/sea-slug.png'); }
.egret-icon {
  background-image: url('/images/egret.png'); }
.salamander-icon {
  background-image: url('/images/salamander.png'); }

Multiple Assignment #each-multi-assign

The @each directive can also use multiple variables, as in @each $var1, $var2, ... in <list> . If <list> is a list of lists, each element of the sub-lists is assigned to the respective variable. فمثلا:

@each $animal, $color, $cursor in (puma, black, default),
                                  (sea-slug, blue, pointer),
                                  (egret, white, move) {
  .#{$animal}-icon {
    background-image: url('/images/#{$animal}.png');
    border: 2px solid $color;
    cursor: $cursor;
  }
}

is compiled to:

.puma-icon {
  background-image: url('/images/puma.png');
  border: 2px solid black;
  cursor: default; }
.sea-slug-icon {
  background-image: url('/images/sea-slug.png');
  border: 2px solid blue;
  cursor: pointer; }
.egret-icon {
  background-image: url('/images/egret.png');
  border: 2px solid white;
  cursor: move; }

Since map are treated as lists of pairs, multiple assignment works with them as well. فمثلا:

@each $header, $size in (h1: 2em, h2: 1.5em, h3: 1.2em) {
  #{$header} {
    font-size: $size;
  }
}

is compiled to:

h1 {
  font-size: 2em; }
h2 {
  font-size: 1.5em; }
h3 {
  font-size: 1.2em; }

@while

The @while directive takes a SassScript expression and repeatedly outputs the nested styles until the statement evaluates to false . This can be used to achieve more complex looping than the @for statement is capable of, although this is rarely necessary. فمثلا:

$i: 6;
@while $i > 0 {
  .item-#{$i} { width: 2em * $i; }
  $i: $i - 2;
}

is compiled to:

.item-6 {
  width: 12em; }

.item-4 {
  width: 8em; }

.item-2 {
  width: 4em; }

Mixin Directives #mixins

Mixins allow you to define styles that can be re-used throughout the stylesheet without needing to resort to non-semantic classes like .float-left . Mixins can also contain full CSS rules, and anything else allowed elsewhere in a Sass document. They can even take arguments which allows you to produce a wide variety of styles with very few mixins.

Defining a Mixin: @mixin #defining_a_mixin

Mixins are defined with the @mixin directive. It's followed by the name of the mixin and optionally the arguments , and a block containing the contents of the mixin. For example, the large-text mixin is defined as follows:

@mixin large-text {
  font: {
    family: Arial;
    size: 20px;
    weight: bold;
  }
  color: #ff0000;
}

Mixins may also contain selectors, possibly mixed with properties. The selectors can even contain parent references . فمثلا:

@mixin clearfix {
  display: inline-block;
  &:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
  }
  * html & { height: 1px }
}

For historical reasons, mixin names (and all other Sass identifiers) can use hyphens and underscores interchangeably. For example, if you define a mixin called add-column , you can include it as add_column , and vice versa.

Including a Mixin: @include #including_a_mixin

Mixins are included in the document with the @include directive. This takes the name of a mixin and optionally arguments , and includes the styles defined by that mixin into the current rule. فمثلا:

.page-title {
  @include large-text;
  padding: 4px;
  margin-top: 10px;
}

is compiled to:

.page-title {
  font-family: Arial;
  font-size: 20px;
  font-weight: bold;
  color: #ff0000;
  padding: 4px;
  margin-top: 10px; }

Mixins may also be included outside of any rule (that is, at the root of the document) as long as they don't directly define any properties or use any parent references. فمثلا:

@mixin silly-links {
  a {
    color: blue;
    background-color: red;
  }
}

@include silly-links;

is compiled to:

a {
  color: blue;
  background-color: red; }

Mixin definitions can also include other mixins. فمثلا:

@mixin compound {
  @include highlighted-background;
  @include header-text;
}

@mixin highlighted-background { background-color: #fc0; }
@mixin header-text { font-size: 20px; }

Mixins may include themselves. This is different than the behavior of Sass versions prior to 3.3, where mixin recursion was forbidden.

Mixins that only define descendent selectors can be safely mixed into the top most level of a document.

Arguments #mixin-arguments

Mixins can take SassScript values as arguments, which are given when the mixin is included and made available within the mixin as variables.

When defining a mixin, the arguments are written as variable names separated by commas, all in parentheses after the name. Then when including the mixin, values can be passed in in the same manner. فمثلا:

@mixin sexy-border($color, $width) {
  border: {
    color: $color;
    width: $width;
    style: dashed;
  }
}

p { @include sexy-border(blue, 1in); }

is compiled to:

p {
  border-color: blue;
  border-width: 1in;
  border-style: dashed; }

Mixins can also specify default values for their arguments using the normal variable-setting syntax. Then when the mixin is included, if it doesn't pass in that argument, the default value will be used instead. فمثلا:

@mixin sexy-border($color, $width: 1in) {
  border: {
    color: $color;
    width: $width;
    style: dashed;
  }
}
p { @include sexy-border(blue); }
h1 { @include sexy-border(blue, 2in); }

is compiled to:

p {
  border-color: blue;
  border-width: 1in;
  border-style: dashed; }

h1 {
  border-color: blue;
  border-width: 2in;
  border-style: dashed; }

وسيطات الكلمات الرئيسية

Mixins can also be included using explicit keyword arguments. For instance, the above example could be written as:

p { @include sexy-border($color: blue); }
h1 { @include sexy-border($color: blue, $width: 2in); }

While this is less concise, it can make the stylesheet easier to read. It also allows functions to present more flexible interfaces, providing many arguments without becoming difficult to call.

Named arguments can be passed in any order, and arguments with default values can be omitted. Since the named arguments are variable names, underscores and dashes can be used interchangeably.

Trailing Commas

When the last argument to a mixin or function is a positional or keyword-style argument, that argument can be followed by a trailing comma. Some prefer this coding style as it can lead to more concise diffs and fewer syntax errors when refactoring.

Variable Arguments

Sometimes it makes sense for a mixin or function to take an unknown number of arguments. For example, a mixin for creating box shadows might take any number of shadows as arguments. For these situations, Sass supports "variable arguments," which are arguments at the end of a mixin or function declaration that take all leftover arguments and package them up as a list . These arguments look just like normal arguments, but are followed by ... . فمثلا:

@mixin box-shadow($shadows...) {
  -moz-box-shadow: $shadows;
  -webkit-box-shadow: $shadows;
  box-shadow: $shadows;
}

.shadows {
  @include box-shadow(0px 4px 5px #666, 2px 6px 10px #999);
}

is compiled to:

.shadows {
  -moz-box-shadow: 0px 4px 5px #666, 2px 6px 10px #999;
  -webkit-box-shadow: 0px 4px 5px #666, 2px 6px 10px #999;
  box-shadow: 0px 4px 5px #666, 2px 6px 10px #999;
}

Variable arguments also contain any keyword arguments passed to the mixin or function. These can be accessed using the keywords($args) function , which returns them as a map from strings (without $ ) to values.

Variable arguments can also be used when calling a mixin. Using the same syntax, you can expand a list of values so that each value is passed as a separate argument, or expand a map of values so that each pair is treated as a keyword argument. فمثلا:

@mixin colors($text, $background, $border) {
  color: $text;
  background-color: $background;
  border-color: $border;
}

$values: #ff0000, #00ff00, #0000ff;
.primary {
  @include colors($values...);
}

$value-map: (text: #00ff00, background: #0000ff, border: #ff0000);
.secondary {
  @include colors($value-map...);
}

is compiled to:

.primary {
  color: #ff0000;
  background-color: #00ff00;
  border-color: #0000ff;
}

.secondary {
  color: #00ff00;
  background-color: #0000ff;
  border-color: #ff0000;
}

You can pass both an argument list and a map as long as the list comes before the map, as in @include colors($values..., $map...) .

You can use variable arguments to wrap a mixin and add additional styles without changing the argument signature of the mixin. If you do, keyword arguments will get directly passed through to the wrapped mixin. فمثلا:

@mixin wrapped-stylish-mixin($args...) {
  font-weight: bold;
  @include stylish-mixin($args...);
}

.stylish {
  // The $width argument will get passed on to "stylish-mixin" as a keyword
  @include wrapped-stylish-mixin(#00ff00, $width: 100px);
}

Passing Content Blocks to a Mixin #mixin-content

It is possible to pass a block of styles to the mixin for placement within the styles included by the mixin. The styles will appear at the location of any @content directives found within the mixin. This makes it possible to define abstractions relating to the construction of selectors and directives.

فمثلا:

@mixin apply-to-ie6-only {
  * html {
    @content;
  }
}
@include apply-to-ie6-only {
  #logo {
    background-image: url(/logo.gif);
  }
}

يولد:

* html #logo {
  background-image: url(/logo.gif);
}

The same mixins can be done in the .sass shorthand syntax:

=apply-to-ie6-only
  * html
    @content

+apply-to-ie6-only
  #logo
    background-image: url(/logo.gif)

Note: when the @content directive is specified more than once or in a loop, the style block will be duplicated with each invocation.

Some mixins may require a passed content block or may have different behavior depending on whether a content block was passed. The content-exists() function will return true when a content block is passed to the current mixin and can be used to implement such behaviors.

Variable Scope and Content Blocks

The block of content passed to a mixin are evaluated in the scope where the block is defined, not in the scope of the mixin. This means that variables local to the mixin cannot be used within the passed style block and variables will resolve to the global value:

$color: white;
@mixin colors($color: blue) {
  background-color: $color;
  @content;
  border-color: $color;
}
.colors {
  @include colors { color: $color; }
}

Compiles to:

.colors {
  background-color: blue;
  color: white;
  border-color: blue;
}

Additionally, this makes it clear that the variables and mixins that are used within the passed block are related to the other styles around where the block is defined. فمثلا:

#sidebar {
  $sidebar-width: 300px;
  width: $sidebar-width;
  @include smartphone {
    width: $sidebar-width / 3;
  }
}

Function Directives #function_directives

It is possible to define your own functions in sass and use them in any value or script context. فمثلا:

$grid-width: 40px;
$gutter-width: 10px;

@function grid-width($n) {
  @return $n * $grid-width + ($n - 1) * $gutter-width;
}

#sidebar { width: grid-width(5); }

Becomes:

#sidebar {
  width: 240px; }

As you can see functions can access any globally defined variables as well as accept arguments just like a mixin. A function may have several statements contained within it, and you must call @return to set the return value of the function.

As with mixins, you can call Sass-defined functions using keyword arguments. In the above example we could have called the function like this:

#sidebar { width: grid-width($n: 5); }

It is recommended that you prefix your functions to avoid naming conflicts and so that readers of your stylesheets know they are not part of Sass or CSS. For example, if you work for ACME Corp, you might have named the function above -acme-grid-width .

User-defined functions also support variable arguments in the same way as mixins.

For historical reasons, function names (and all other Sass identifiers) can use hyphens and underscores interchangeably. For example, if you define a function called grid-width , you can use it as grid_width , and vice versa.

Output Style

Although the default CSS style that Sass outputs is very nice and reflects the structure of the document, tastes and needs vary and so Sass supports several other styles.

Sass allows you to choose between four different output styles by setting the :style option or using the --style command-line flag.

:nested

Nested style is the default Sass style, because it reflects the structure of the CSS styles and the HTML document they're styling. Each property has its own line, but the indentation isn't constant. Each rule is indented based on how deeply it's nested. فمثلا:

#main {
  color: #fff;
  background-color: #000; }
  #main p {
    width: 10em; }

.huge {
  font-size: 10em;
  font-weight: bold;
  text-decoration: underline; }

Nested style is very useful when looking at large CSS files: it allows you to easily grasp the structure of the file without actually reading anything.

:expanded

Expanded is a more typical human-made CSS style, with each property and rule taking up one line. Properties are indented within the rules, but the rules aren't indented in any special way. فمثلا:

#main {
  color: #fff;
  background-color: #000;
}
#main p {
  width: 10em;
}

.huge {
  font-size: 10em;
  font-weight: bold;
  text-decoration: underline;
}

:compact

Compact style takes up less space than Nested or Expanded. It also draws the focus more to the selectors than to their properties. Each CSS rule takes up only one line, with every property defined on that line. Nested rules are placed next to each other with no newline, while separate groups of rules have newlines between them. فمثلا:

#main { color: #fff; background-color: #000; }
#main p { width: 10em; }

.huge { font-size: 10em; font-weight: bold; text-decoration: underline; }

:compressed

Compressed style takes up the minimum amount of space possible, having no whitespace except that necessary to separate selectors and a newline at the end of the file. It also includes some other minor compressions, such as choosing the smallest representation for colors. It's not meant to be human-readable. فمثلا:

#main{color:#fff;background-color:#000}#main p{width:10em}.huge{font-size:10em;font-weight:bold;text-decoration:underline}

Extending Sass

Sass provides a number of advanced customizations for users with unique requirements. Using these features requires a strong understanding of Ruby.

Defining Custom Sass Functions

Users can define their own Sass functions using the Ruby API. For more information, see the source documentation .

Cache Stores

Sass caches parsed documents so that they can be reused without parsing them again unless they have changed. By default, Sass will write these cache files to a location on the filesystem indicated by :cache_location . If you cannot write to the filesystem or need to share cache across ruby processes or machines, then you can define your own cache store and set the :cache_store option . For details on creating your own cache store, please see the Sass::CacheStores::Base .

Custom Importers

Sass importers are in charge of taking paths passed to @import and finding the appropriate Sass code for those paths. By default, this code is loaded from the Sass::Importers::Filesystem , but importers could be added to load from a database, over HTTP, or use a different file naming scheme than what Sass expects.

Each importer is in charge of a single load path (or whatever the corresponding notion is for the backend). Importers can be placed in the :load_paths array alongside normal filesystem paths.

When resolving an @import , Sass will go through the load paths looking for an importer that successfully imports the path. Once one is found, the imported file is used.

User-created importers must inherit from Sass::Importers::Base .

原文