Préprocesseur CSS

Un préprocesseur CSS est un outil (ou programme) informatique permettant de générer dynamiquement des fichiers CSS. L'objectif est d'améliorer l'écriture de ces fichiers, en apportant plus de flexibilité au développeur web.

Principe

Comme son nom l'indique, un préprocesseur CSS intervient avant le traitement des fichiers CSS par les navigateurs web. Il se situe soit côté serveur, soit côté client[1]. Il permet de générer dynamiquement un fichier CSS standard (aux normes W3C) à partir d'un ou de plusieurs fichiers source qui disposent d'une syntaxe plus étendue que le CSS[réf. souhaitée].

Il existe plusieurs préprocesseurs CSS, chacun possédant une syntaxe et un langage qui leur est propre. Bien qu'ils étendent la structure du CSS, ils restent indépendants des normes CSS existantes. Parmi les plus connus se trouvent Sass, LESS et Stylus[2]. L'objectif des préprocesseurs CSS est d'ajouter des fonctionnalités qui permettent au développeur de mieux structurer son code, fonctionnalités qui pour beaucoup manquent au CSS[3]. En créant une couche d'abstraction, elles visent à améliorer la maintenabilité et la clarté du code, à améliorer sa structure, à éviter les répétitions (philosophie de programmation "DRY"), et ainsi à augmenter la productivité du développeur[4]. Quelques-unes des fonctionnalités offertes par les préprocesseurs CSS incluent généralement : les variables, l’imbrication (hiérarchisation) du code, les mixins, les opérations mathématiques et logiques, les conditions, les boucles et les importations[2].

Exemples

Pour des exemples sur les fonctionnalités et la syntaxe d'un préprocesseur CSS, voir l'article sur le langage LESS.

Traitements complémentaires

Certains préprocesseurs CSS fournissent des traitements complémentaires sur les fichiers CSS. Par exemple, les Google Stylesheets proposent la minification du code, la vérification syntaxique, l'inversion RTL (Right-To-Left en anglais), et le renommage de classe[5]. Ces opérations sont assimilées à du post-traitement CSS, travail dédié généralement aux "postprocesseurs" CSS[6].

Avantages et inconvénients

Tout le monde ne plaide pas forcément en faveur de l'utilisation des préprocesseurs CSS. Voici quelques arguments qui peuvent être avancés à leur encontre[7] :

  • "Ils complexifient CSS", la syntaxe des préprocesseurs étant plus complexe que le CSS de base.
  • "Ils n'ajoutent pas de fonctionnalités CSS aux CSS", les préprocesseurs ne pouvant générer que du CSS standard.
  • "Ils ne font pas (toujours) gagner de temps", leur utilisation ne se justifiant pas pour des projets de taille modeste.
  • "Ils peuvent être dangereux pour le standard CSS", leurs fonctionnalités risquant de faire stagner l'évolution du CSS.

Pour d'autres, de telles raisons ne sont pas suffisantes, le niveau d'abstraction et la flexibilité obtenus par les préprocesseurs CSS s'avérant plus bénéfiques que toute autre considération[8].

Liste de préprocesseurs CSS

Nom Site officiel Dernière version Licence
Sass http://sass-lang.com 3.5.6 () MIT
LESS http://lesscss.org 3.8.1 () Apache 2
Stylus http://stylus-lang.com 0.54.2 () MIT
Closure Stylesheets https://github.com/google/closure-stylesheets 1.2.0 () Apache 2
CSS Preprocessor http://csspp.org 1.0.9 () GNU GPL v2
CSS-Crush http://the-echoplex.net/csscrush 2.4.0 () Libre
Myth http://www.myth.io 1.5.0 () MIT
Rework https://github.com/reworkcss/rework 1.0.1 () MIT
xCSS (Andrey Popp) https://github.com/andreypopp/xcss 1.2.5 () MIT
Clay http://fvisser.nl/clay Libre
DtCSS https://code.google.com/p/dtcss 1.2.6 () GNU GPL v3
Turbine https://github.com/TurbineCSS/Turbine 1.1.0 beta1 () GNU GPL v3
xCSS (Anton Pawlik) http://xcss.antpaw.org/ 1.0.1 () MIT
CSS Cacheer http://retired.haveamint.com/archive/2008/05/30/check_out_css_cacheer v003 () BSD
Switch CSS http://switchcss.sourceforge.net 1.01 () GNU GPL v2
DRY-CSS https://www.npmjs.com/package/drycss 1.0.1 ISC
xCSS Sygnal http://docs.xcss.sygnal.com ? Propriétaire ?

Références

  1. « Les préprocesseurs CSS, c'est quoi ? », sur L'ami du développeur (consulté le )
  2. a et b (en-US) « An Introduction to CSS Pre-Processors: Sass, LESS and Stylus | HTML Mag », sur HTML Mag (consulté le )
  3. « LESS - Alsacreations », sur www.alsacreations.com (consulté le )
  4. Kaelig Deloumeau-Prigent, CSS maintenables : avec Sass & Compass, Paris, Eyrolles, , 237 p. (ISBN 978-2-212-13640-1, lire en ligne), p. 131
  5. « google/closure-stylesheets », sur GitHub (consulté le )
  6. « Les postprocesseurs CSS », sur iamvdo.me (consulté le )
  7. « Pourquoi je n'utilise pas les préprocesseurs CSS? », sur iamvdo.me (consulté le )
  8. « Les idées reçues sur les préprocesseurs CSS (Sass, Less...) - Human Coders Blog », sur Human Coders Blog (consulté le )

Articles connexes

Read other articles:

CC07Stasiun Nishi-Fujinomiya西富士宮駅Stasiun JR Nishi-FujinomiyaLokasiKibune-cho 1, Fujinomiya-shi, Shizuoka-kenJepangKoordinat35°13′33″N 138°36′9″E / 35.22583°N 138.60250°E / 35.22583; 138.60250Koordinat: 35°13′33″N 138°36′9″E / 35.22583°N 138.60250°E / 35.22583; 138.60250Pengelola JR CentralJalur Jalur MinobuLetak dari pangkal11.9 kilometer dari FujiJumlah peron1 peron pulauInformasi lainStatusMemiliki stafSejarah...

 

جانج هيوك   معلومات شخصية اسم الولادة جونغ يونغ جون الميلاد 20 ديسمبر 1976 (47 سنة)  بوسان  مواطنة كوريا الجنوبية  الطول 177 سم الزوجة كيم يوجين الحياة العملية المدرسة الأم معهد سول للفنونجامعة دانكوك  المهنة ممثل،  وممثل أفلام،  ولاعب تايكوندو،  وممثل تلفزيو...

 

Festival Internacional de Cine de Cartagena de Indias Datos básicosNombre oficial Festival Internacional de Cine de Cartagena de IndiasOtros nombres FICCITipo IberoamericanoUbicación Cartagena de Indias, ColombiaPrimera edición 1960Organizador Corporación Festival de Cine de CartagenaGalardón India CatalinaIdioma EspañolEdiciónDirector Lina RodríguezInauguración Entre los meses de febrero y marzo de cada año.[1]​Días de duración (febrero, marzo)Página oficial[editar da...

水道橋(すいどうばし)は、東京都千代田区と文京区の間を流れる神田川に架かる橋である。右岸(南側)が千代田区神田三崎町一・二丁目、左岸は上流側が文京区後楽一丁目、下流側が同本郷一丁目となる。 文京区には水道という町名があるが、本橋より神田川沿いに2kmほど上流に離れている。また神田川をはさんで文京区水道の対岸には新宿区水道町という町名があ

 

لوران أمير بلجيكا (بالفرنسية: Laurent Benoît Baudouin Marie de Belgique)‏، و(بالدنماركية: Laurens Benedikt Boudewijn Maria van België)‏    معلومات شخصية الميلاد 19 أكتوبر 1963 (60 سنة)  لاكن  [لغات أخرى]‏  مواطنة بلجيكا  الزوجة كلير أميرة بلجيكا (12 أبريل 2003–)  الأولاد نيكولا أمير بلجيكاإيميريك أ

 

Gimpo International AirportGimpo Gukje GonghangKimp'o Kukche KonghangDomestic TerminalIATA: GMPICAO: RKSSInformasiJenisPublicPengelolaKorea Airports CorporationMelayaniSeoulLokasiGangseo-gu, Seoul, South KoreaMaskapai penghubung Asiana Airlines Korean Air Ketinggian dpl18 mdplSitus webgimpo.airport.co.krPetaGMPLocation in South KoreaLandasan pacu Arah Panjang Permukaan kaki m 14R/32L 10,499 3,200 Aspal 14L/32R 11,811 3,600 Beton Statistik (2014)Pergerakan pesawat138.706Penumpang21.5...

Manuela Espejo Figura en cera de Manuela Espejo, parte de la colección del Museo Alberto Mena CaamañoInformación personalNombre de nacimiento María Manuela Dominga de Espejo y AldazNacimiento 20 de diciembre de 1753no se San Francisco de Quito, Quito, Imperio españolFallecimiento 1829 (76 años) San Francisco de Quito, Sur, Gran ColombiaNacionalidad EcuatorianaFamiliaPadres Luis EspejoCatalina AldazCónyuge José Mejía LequericaFamiliares Eugenio Espejo (hermano)Información profesional...

 

モンジュラ伯爵マクシミリアン・ヨーゼフ モンジュラ伯爵マクシミリアン・ヨーゼフ(Maximilian Joseph Graf von Montgelas, 1759年9月12日 - 1836年6月14日)は、バイエルン王国の成立前後に活躍した官僚・政治家・貴族である。 生涯 官僚として マクシミリアンの父ヤーヌスはサヴォワ出身の軍人で、バイエルンで選帝侯マクシミリアン3世ヨーゼフに仕えた。母マリーア・ウルズ...

 

Species of moth Phycitodes binaevella Scientific classification Domain: Eukaryota Kingdom: Animalia Phylum: Arthropoda Class: Insecta Order: Lepidoptera Family: Pyralidae Genus: Phycitodes Species: P. binaevella Binomial name Phycitodes binaevella(Hübner, 1813) Synonyms Tinea binaevella Hübner, 1813 Rotruda binaevella iranella Roesler, 1965 Homoeosoma binaevella var. petrella Herrich-Schäffer, 1849 Homoeosoma binaevella siciliella Zerny, 1914 Homoeosoma binaevella var. unitella Staudi...

У Вікіпедії є статті про інших людей із прізвищем Вербицький.Юрій Тарасович Вербицький Юрій Вербицький у горах Криму Юрій Вербицький у горах КримуНародився 25 серпня 1963(1963-08-25)Львів, Українська РСР, СРСРПомер 22 січня 2014(2014-01-22) (50 років)біля села Гнідин, Бориспільський райо...

 

Hospital in Eastern Region, UgandaMbale Regional Referral HospitalUganda Ministry of HealthGeographyLocationMbale, Mbale District, Eastern Region, UgandaCoordinates01°04′36″N 34°10′35″E / 1.07667°N 34.17639°E / 1.07667; 34.17639OrganisationCare systemPublicTypeGeneral and TeachingServicesEmergency departmentIBeds400HistoryOpened1924LinksOther linksHospitals in UgandaMedical education in UgandaBusitema University Medical School Mbale Regional Referral Hospit...

 

هذه المقالة يتيمة إذ تصل إليها مقالات أخرى قليلة جدًا. فضلًا، ساعد بإضافة وصلة إليها في مقالات متعلقة بها. (نوفمبر 2018) السلوك الإجرامي (بالإنجليزية: Criminal Behavior) يعرف على أنه سلوك منافٍ للقواعد الأخلاقية، وينتهك فيه صاحبه القوانين المعروفة، ويتصرف بطريقة سلبية مخالفة للقواعد...

Book by Roy Richard Grinker Unstrange Minds AuthorRoy Richard GrinkerLanguageEnglishSubjectAutismGenreNon-fictionPublisherBasic BooksPublication date2007Media typePaperbackPages352ISBN0-465-02764-4 Unstrange Minds is a nonfiction book by anthropologist Roy Richard Grinker about the rise in autism diagnoses throughout the world over the last twenty years. It provides a cultural history of autism and describes the experiences of parents of children with autism in the United States, South K...

 

Contoh pengumuman tender oleh Departemen Keuangan Indonesia, 2009. Klik untuk memperbesar. Tender adalah tawaran resmi dan terstruktur untuk mencari mitra yang mengajukan harga, memborong pekerjaan, atau menyediakan barang dan jasa.[1][2] Dalam sektor pemerintahan, tender resmi sering disyaratkan secara rinci oleh hukum untuk memastikan bahwa proyek yang menggunakan dana negara dilakukan dengan bebas, adil, serta terlepas dari suap atau nepotisme. Referensi ^ Tips Jitu Menang ...

 

2021 Belgorod Oblast gubernatorial election ← 2017 17–19 September 2021 2026 → Turnout58.57%   CPRF SR-ZP Candidate Vyacheslav Gladkov Kirill Skachko Yury Osetrov Party United Russia Communist SR-ZP Popular vote 566,353 71,430 27,101 Percentage 78.79% 9.94% 3.77%   LDPR RPPSS Candidate Yevgeny Dremov Vladimir Abelmazov Party LDPR RPPSS Popular vote 20,899 20,828 Percentage 2.91% 2.90% Governor before election Vyacheslav Gladkov United Russia Elected...

1897 science fiction novel by H. G. Wells This article is about the H. G. Wells novel. For the Ralph Ellison novel, see Invisible Man. For other uses, see The Invisible Man (disambiguation). The Invisible Man First edition cover (UK)AuthorH. G. WellsCountryUnited KingdomLanguageEnglishGenreScience fiction novelPublished1897PublisherC. Arthur Pearson (UK)Edward Arnold (US)Media typePrint (hardback & paperback)Pages149TextThe Invisible Man at Wikisource The Invisible Man is a science f...

 

Pakistani nationals and citizens who reside outside of Pakistan This article may require copy editing for grammar, style, cohesion, tone, or spelling. You can assist by editing it. (June 2023) (Learn how and when to remove this template message) Overseas Pakistanisبیرون ملک پاکستانی نژادFlag of Pakistan Total populationc. 9,956,000 (2022 estimate)[a]Regions with significant populations Saudi Arabia2,714,684 (2019-2020 estimate)[1] United Ara...

 

Russian author and political activist (1868–1936) For other uses, see Maxim Gorky (disambiguation). In this name that follows Eastern Slavic naming conventions, the patronymic is Maximovich and the family name is Peshkov. Maxim GorkyGorky in 1900Native nameМаксим ГорькийBornAleksey Maksimovich Peshkov28 March [O.S. 16 March] 1868Nizhny Novgorod, Nizhny Novgorod Governorate, Russian EmpireDied18 June 1936(1936-06-18) (aged 68)Gorki-10, Moscow Oblast, S...

Slovakia component of the 2024 European Parliament election 2024 European Parliament election in Slovakia ← 2019 8 June 2024 2029 → ← outgoing membersAll 14 Slovak seats in the European Parliament   First party Second party Third party   Leader Ľudovít Ódor Monika Beňová Marian Kotleba Party PS SMER–SD ĽSNS Alliance ALDE / EPP Non-Inscrits APF Last election 2   Fourth party Fifth party Sixth party   Leader Miriam Lexmann Richar...

 

Can't NobodySingel oleh Kelly Rowlanddari album Simply DeepDirilis4 Februari 2003 (2003-02-04)FormatCD, nada sambung, 12 singleDirekam2002The Hit Factory(New York City)GenreR&B, dance-popDurasi3:30 (radio edit)4:04 (versi album)LabelColumbiaPenciptaRich Harrison, Robert Syke Dyke Reed, Tony FisherProduserRich Harrison Can't Nobody adalah singel dari penyanyi R&B asal Amerika Serikat, Kelly Rowland, dari album perdana miliknya, Simply Deep, yang dirilis pada tanggal 4 Februari 200...

 

Strategi Solo vs Squad di Free Fire: Cara Menang Mudah!