{"id":26534,"date":"2017-04-15T10:42:01","date_gmt":"2017-04-15T10:42:01","guid":{"rendered":"https:\/\/dev.railscarma.com\/what-is-sass-sass-basics-installation\/"},"modified":"2021-06-05T09:12:53","modified_gmt":"2021-06-05T09:12:53","slug":"quest-ce-que-linstallation-des-bases-de-sass-sass","status":"publish","type":"post","link":"https:\/\/www.railscarma.com\/fr\/blog\/articles-techniques\/quest-ce-que-linstallation-des-bases-de-sass-sass\/","title":{"rendered":"Premiers pas avec Sass \u2013 Apprendre les bases et son installation"},"content":{"rendered":"<div data-elementor-type=\"wp-post\" data-elementor-id=\"26534\" class=\"elementor elementor-26534\" data-elementor-post-type=\"post\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-44e78025 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"44e78025\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-1ca09acf\" data-id=\"1ca09acf\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-552eb4c9 elementor-widget elementor-widget-text-editor\" data-id=\"552eb4c9\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p align=\"justify\">Peut-\u00eatre avez-vous d\u00e9j\u00e0 entendu parler de Sass (Syntaxically Awesome StyleSheets) et cela vous int\u00e9resse, mais vous n&#039;avez pas d&#039;id\u00e9e sur la fa\u00e7on de le configurer ou de l&#039;incorporer dans votre projet. Dans sa forme la plus \u00e9l\u00e9mentaire, Sass est connu sous le nom de processeur CCS, ce qui permet \u00e0 l&#039;\u00e9criture CCS de devenir plus efficace et plus rapide. Nous passerons en revue les bases et les installations de Sass pour Mac et Windows.<\/p>\n\n<h2>L&#039;apprentissage de base sur Sass<\/h2>\n<p align=\"justify\">Il existe quelques courbes d&#039;apprentissage en ce qui concerne l&#039;utilisation et la configuration de Sass. Pour pouvoir avancer dans le projet Sass, vous devez avoir au moins des connaissances de base en HTML et CSS. Vous devez ma\u00eetriser ou ma\u00eetriser le CSS avant d&#039;essayer d&#039;apprendre le processeur CSS, qui est le Sass.<\/p>\n<p align=\"justify\">Si vous avez d\u00e9j\u00e0 chang\u00e9 les couleurs de votre feuille de style beaucoup de temps ou si vous souhaitiez qu&#039;il existe une meilleure solution, ou si votre feuille de style \u00e9tait d\u00e9j\u00e0 recouverte des pr\u00e9fixes du fournisseur, ou si vous aviez remarqu\u00e9 que vos feuilles de style \u00e9taient plus longues et difficiles \u00e0 maintenir, peut-\u00eatre ces raisons \u00e9taient suffisants pour proposer d&#039;\u00e9tudier Sass. Je vais r\u00e9sumer quelques termes permettant de comprendre les bases de Sass.<\/p>\n\n<ul>\n \t<li><strong>Variable<\/strong> \u2013 c&#039;est un conteneur de stockage pour les valeurs CSS comme les nombres et les couleurs. La syntaxe a \u00e9t\u00e9 \u00e9crite comme \u00ab\u00a0$variable\u00a0\u00bb. Ce code peut \u00eatre utilis\u00e9 dans toute la feuille de style apr\u00e8s l&#039;avoir d\u00e9fini.<\/li>\n \t<li><strong>Nidification<\/strong> \u2013 il r\u00e9duit la r\u00e9p\u00e9tition dans le code et a la capacit\u00e9 de rendre l\u2019\u00e9criture CSS plus facile et plus rapide.<\/li>\n \t<li><strong>Partiels<\/strong> \u2013 ce sont les fichiers CSS commen\u00e7ant par le trait de soulignement \u00ab _partial.scss \u00bb et ils ne sont pas compil\u00e9s sur leurs propres fichiers CSS mais import\u00e9s dans le fichier principal.<\/li>\n \t<li><strong>Importer<\/strong> \u2013 utilisez \u00ab @import \u00bb afin de compiler tous les partiels dans un seul fichier.<\/li>\n \t<li><strong>Mixins<\/strong> \u2013 utilisez \u00ab @mixin \u00bb pour le CSS r\u00e9p\u00e9titif, comme lorsque les pr\u00e9fixes du fournisseur \u00e9taient requis.<\/li>\n \t<li><strong>\u00c9tendre<\/strong> \u2013 utilisez \u00ab @extend \u00bb afin de modifier quelques aspects de la cl\u00e9 d&#039;\u00e9l\u00e9ments par ailleurs de m\u00eame identit\u00e9, comme par exemple un groupe de boutons ayant des couleurs diff\u00e9rentes.<\/li>\n \t<li><strong>Les op\u00e9rateurs<\/strong> \u2013 cela permet \u00e0 l&#039;utilisateur d&#039;utiliser des calculs math\u00e9matiques dans le CSS, comme d\u00e9finir la largeur des diff\u00e9rentes parties des mises en page.<\/li>\n<\/ul>\n<h2>Installer Sass sous Mac et Windows<\/h2>\n<p align=\"justify\">Sass fonctionne sur le langage de programmation Ruby, Ruby doit donc \u00eatre install\u00e9 sur votre ordinateur. Pour les utilisateurs Mac, Ruby est d\u00e9j\u00e0 pr\u00e9install\u00e9 sur OSX. V\u00e9rifiez que vous utilisez une version mise \u00e0 jour en tapant \u00ab ruby \u2013 v \u00bb. Si le nombre est inf\u00e9rieur \u00e0 2.0.0, tapez \u00ab do gem install ruby \u00bb pour mettre \u00e0 jour. Vous pouvez maintenant commencer \u00e0 installer Sass.<\/p>\n<p align=\"justify\">Cependant, sous Windows, l\u2019installation est un peu plus d\u00e9licate car aucun Ruby n\u2019est install\u00e9. Si vous ex\u00e9cutez une version 64 bits de Windows 7, choisissez Ruby 2.1.7 (x54). La m\u00eame chose doit \u00e9galement \u00eatre faite pour Windows 8 et 10. Assurez-vous de choisir \u00ab Ajouter l&#039;ex\u00e9cutable Ruby dans votre PATH \u00bb, puis continuez. Une fois Ruby install\u00e9, ouvrez l&#039;invite de commande, puis confirmez que Ruby a \u00e9t\u00e9 install\u00e9. Ensuite, vous pouvez installer Sass en tapant \u00ab<strong>gem installer sass<\/strong>\u00bb et vous \u00eates pr\u00eat.<\/p>\n<strong><a href=\"https:\/\/www.railscarma.com\/fr\/\" target=\"_blank\" rel=\"noopener noreferrer\">RailsCarma<\/a><\/strong> travaille sur le framework Ruby on Rails depuis ses d\u00e9buts et a g\u00e9r\u00e9 plus de 250 projets RoR. Consultez notre <a href=\"\/fr\/portefeuille\/\" target=\"_blank\" rel=\"noopener noreferrer\"><strong>portefeuille<\/strong><\/a> comprendre comment nous contribuons \u00e0 changer la forme de l&#039;industrie du logiciel en fournissant <a href=\"https:\/\/www.railscarma.com\/fr\/embaucher-un-developpeur-ruby-on-rails\/\">D\u00e9veloppeur Ruby on Rails<\/a>. <a href=\"\/fr\/contactez-nous\/\">Contactez-nous d\u00e8s maintenant !<\/a>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-75b63942 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"75b63942\" data-element_type=\"section\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-217fabd3\" data-id=\"217fabd3\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-2ad73c45 elementor-widget elementor-widget-heading\" data-id=\"2ad73c45\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Abonnez-vous pour les derni\u00e8res mises \u00e0 jour<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-50a30c85 elementor-widget elementor-widget-shortcode\" data-id=\"50a30c85\" data-element_type=\"widget\" data-widget_type=\"shortcode.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-shortcode\">\t\t\t\t\t<script type=\"text\/javascript\">\n\t\t\t\t\t\tvar gCaptchaSibWidget;\n                        var onloadSibCallbackInvisible = function () {\n\n                            var element = document.getElementsByClassName('sib-default-btn');\n                            var countInvisible = 0;\n                            var indexArray = [];\n                            jQuery('.sib-default-btn').each(function (index, el) {\n                                if ((jQuery(el).attr('id') == \"invisible\")) {\n                                    indexArray[countInvisible] = index;\n                                    countInvisible++\n                                }\n                            });\n\n                            jQuery('.invi-recaptcha').each(function (index, el) {\n                                grecaptcha.render(element[indexArray[index]], {\n                                    'sitekey': jQuery(el).attr('data-sitekey'),\n                                    'callback': sibVerifyCallback,\n                                });\n                            });\n                        };\n\t\t\t\t\t<\/script>\n\t\t\t\t\t                <script src=\"https:\/\/www.google.com\/recaptcha\/api.js?onload=onloadSibCallbackInvisible&render=explicit\" async defer><\/script>\n\t\t\t\t\n\t\t\t<form id=\"sib_signup_form_1\" method=\"post\" class=\"sib_signup_form\" action=\"\">\n\t\t\t\t<div class=\"sib_loader\" style=\"display:none;\"><img\n\t\t\t\t\t\t\tsrc=\"https:\/\/www.railscarma.com\/wp-includes\/images\/spinner.gif\" alt=\"chargeur\"><\/div>\n\t\t\t\t<input type=\"hidden\" name=\"sib_form_action\" value=\"subscribe_form_submit\">\n\t\t\t\t<input type=\"hidden\" name=\"sib_form_id\" value=\"1\">\n                <input type=\"hidden\" name=\"sib_form_alert_notice\" value=\"Please fill out this field\">\n                <input type=\"hidden\" name=\"sib_form_invalid_email_notice\" value=\"Your email address is invalid\">\n                <input type=\"hidden\" name=\"sib_security\" value=\"d7f7626ab9\">\n\t\t\t\t<div class=\"sib_signup_box_inside_1\">\n\t\t\t\t\t<div style=\"\/*display:none*\/\" class=\"sib_msg_disp\">\n\t\t\t\t\t<\/div>\n                                            <div id=\"sib_captcha_invisible\" class=\"invi-recaptcha\" data-sitekey=\"6LdikOAaAAAAAJ6SWrrKVQrtw7TQpQAEnv0HS0G3\"><\/div>\n                    \t\t\t\t\t<p class=\"sib-email-area\">\r\n    <label class=\"sib-email-area\"><\/label>\r\n    <input type=\"email\" class=\"sib-email-area\" name=\"email\" required=\"required\" placeholder=\"Adresse e-mail\">\r\n<\/p>\r\n<p class=\"sib-NAME-area\">\r\n    <label class=\"sib-NAME-area\"><\/label>\r\n    <input type=\"text\" class=\"sib-NAME-area\" name=\"NAME\" placeholder=\"Nom\">\r\n<\/p>\r\n<p>\r\n    <input type=\"submit\" id=\"invisible\" class=\"sib-default-btn\" value=\"S&#039;abonner\">\r\n<\/p>\t\t\t\t<\/div>\n\t\t\t<input type=\"hidden\" name=\"trp-form-language\" value=\"fr\"\/><\/form>\n\t\t\t<style>\n\t\t\t\tform#sib_signup_form_1 p.sib-alert-message {\n    padding: 6px 12px;\n    margin-bottom: 20px;\n    border: 1px solid transparent;\n    border-radius: 4px;\n    -webkit-box-sizing: border-box;\n    -moz-box-sizing: border-box;\n    box-sizing: border-box;\n}\nform#sib_signup_form_1 p.sib-alert-message-error {\n    background-color: #f2dede;\n    border-color: #ebccd1;\n    color: #a94442;\n}\nform#sib_signup_form_1 p.sib-alert-message-success {\n    background-color: #dff0d8;\n    border-color: #d6e9c6;\n    color: #3c763d;\n}\nform#sib_signup_form_1 p.sib-alert-message-warning {\n    background-color: #fcf8e3;\n    border-color: #faebcc;\n    color: #8a6d3b;\n}\n\t\t\t<\/style>\n\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t  <div class=\"related-post slider\">\r\n        <div class=\"headline\">Articles Similaires<\/div>\r\n    <div class=\"post-list owl-carousel\">\r\n\r\n            <div class=\"item\">\r\n            <div class=\"thumb post_thumb\">\r\n    <a  title=\"Gemme de Kaminari\" href=\"https:\/\/www.railscarma.com\/fr\/blog\/articles-techniques\/joyau-kaminari\/?related_post_from=37277\">\r\n\r\n      <img decoding=\"async\" width=\"800\" height=\"300\" src=\"https:\/\/www.railscarma.com\/wp-content\/uploads\/2023\/04\/kaminari-gem.jpg\" class=\"attachment-full size-full wp-post-image\" alt=\"joyau kaminari\" srcset=\"https:\/\/www.railscarma.com\/wp-content\/uploads\/2023\/04\/kaminari-gem.jpg 800w, https:\/\/www.railscarma.com\/wp-content\/uploads\/2023\/04\/kaminari-gem-300x113.jpg 300w, https:\/\/www.railscarma.com\/wp-content\/uploads\/2023\/04\/kaminari-gem-768x288.jpg 768w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/>\r\n\r\n    <\/a>\r\n  <\/div>\r\n\r\n  <a class=\"title post_title\"  title=\"Gemme de Kaminari\" href=\"https:\/\/www.railscarma.com\/fr\/blog\/articles-techniques\/joyau-kaminari\/?related_post_from=37277\">\r\n        Gemme de Kaminari  <\/a>\r\n\r\n        <\/div>\r\n              <div class=\"item\">\r\n            <div class=\"thumb post_thumb\">\r\n    <a  title=\"Pourquoi engager des d\u00e9veloppeurs Ruby on Rails en 2026 ?\" href=\"https:\/\/www.railscarma.com\/fr\/blog\/ror\/pourquoi-embaucher-des-developpeurs-ruby-on-rails\/?related_post_from=30627\">\r\n\r\n      <img decoding=\"async\" width=\"800\" height=\"300\" src=\"https:\/\/www.railscarma.com\/wp-content\/uploads\/2019\/01\/why-to-hire-ruby-on-rails-developers-in-2022.jpg\" class=\"attachment-full size-full wp-post-image\" alt=\"pourquoi embaucher des d\u00e9veloppeurs Ruby on Rails en 2022\" srcset=\"https:\/\/www.railscarma.com\/wp-content\/uploads\/2019\/01\/why-to-hire-ruby-on-rails-developers-in-2022.jpg 800w, https:\/\/www.railscarma.com\/wp-content\/uploads\/2019\/01\/why-to-hire-ruby-on-rails-developers-in-2022-300x113.jpg 300w, https:\/\/www.railscarma.com\/wp-content\/uploads\/2019\/01\/why-to-hire-ruby-on-rails-developers-in-2022-768x288.jpg 768w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/>\r\n\r\n    <\/a>\r\n  <\/div>\r\n\r\n  <a class=\"title post_title\"  title=\"Pourquoi engager des d\u00e9veloppeurs Ruby on Rails en 2026 ?\" href=\"https:\/\/www.railscarma.com\/fr\/blog\/ror\/pourquoi-embaucher-des-developpeurs-ruby-on-rails\/?related_post_from=30627\">\r\n        Pourquoi engager des d\u00e9veloppeurs Ruby on Rails en 2026 ?  <\/a>\r\n\r\n        <\/div>\r\n              <div class=\"item\">\r\n            <div class=\"thumb post_thumb\">\r\n    <a  title=\"Importance de l&#039;architecture logicielle dans le d\u00e9veloppement de logiciels d&#039;entreprise\" href=\"https:\/\/www.railscarma.com\/fr\/blog\/ror\/importance-de-larchitecture-logicielle-dans-le-developpement-de-logiciels-dentreprise\/?related_post_from=36250\">\r\n\r\n      <img decoding=\"async\" width=\"800\" height=\"300\" src=\"https:\/\/www.railscarma.com\/wp-content\/uploads\/2022\/06\/Importance-of-Software-Architecture-in-enterprise-software-development.jpg\" class=\"attachment-full size-full wp-post-image\" alt=\"Importance de l&#039;architecture logicielle dans le d\u00e9veloppement de logiciels d&#039;entreprise\" srcset=\"https:\/\/www.railscarma.com\/wp-content\/uploads\/2022\/06\/Importance-of-Software-Architecture-in-enterprise-software-development.jpg 800w, https:\/\/www.railscarma.com\/wp-content\/uploads\/2022\/06\/Importance-of-Software-Architecture-in-enterprise-software-development-300x113.jpg 300w, https:\/\/www.railscarma.com\/wp-content\/uploads\/2022\/06\/Importance-of-Software-Architecture-in-enterprise-software-development-768x288.jpg 768w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/>\r\n\r\n    <\/a>\r\n  <\/div>\r\n\r\n  <a class=\"title post_title\"  title=\"Importance de l&#039;architecture logicielle dans le d\u00e9veloppement de logiciels d&#039;entreprise\" href=\"https:\/\/www.railscarma.com\/fr\/blog\/ror\/importance-de-larchitecture-logicielle-dans-le-developpement-de-logiciels-dentreprise\/?related_post_from=36250\">\r\n        Importance de l&#039;architecture logicielle dans le d\u00e9veloppement de logiciels d&#039;entreprise  <\/a>\r\n\r\n        <\/div>\r\n              <div class=\"item\">\r\n            <div class=\"thumb post_thumb\">\r\n    <a  title=\"Ruby IDE\u00a0: les meilleurs IDE pour le d\u00e9veloppement Ruby on Rails\" href=\"https:\/\/www.railscarma.com\/fr\/blog\/ror\/ruby-ide-les-meilleures-idees-pour-le-developpement-de-ruby-on-rails\/?related_post_from=36125\">\r\n\r\n      <img decoding=\"async\" width=\"800\" height=\"300\" src=\"https:\/\/www.railscarma.com\/wp-content\/uploads\/2022\/01\/BEST-IDES-FOR-RUBY-ON-RAILS-DEVELOPMENT.jpg\" class=\"attachment-full size-full wp-post-image\" alt=\"MEILLEURES ID\u00c9ES POUR LE D\u00c9VELOPPEMENT DE RUBY ON RAILS\" srcset=\"https:\/\/www.railscarma.com\/wp-content\/uploads\/2022\/01\/BEST-IDES-FOR-RUBY-ON-RAILS-DEVELOPMENT.jpg 800w, https:\/\/www.railscarma.com\/wp-content\/uploads\/2022\/01\/BEST-IDES-FOR-RUBY-ON-RAILS-DEVELOPMENT-300x113.jpg 300w, https:\/\/www.railscarma.com\/wp-content\/uploads\/2022\/01\/BEST-IDES-FOR-RUBY-ON-RAILS-DEVELOPMENT-768x288.jpg 768w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/>\r\n\r\n    <\/a>\r\n  <\/div>\r\n\r\n  <a class=\"title post_title\"  title=\"Ruby IDE\u00a0: les meilleurs IDE pour le d\u00e9veloppement Ruby on Rails\" href=\"https:\/\/www.railscarma.com\/fr\/blog\/ror\/ruby-ide-les-meilleures-idees-pour-le-developpement-de-ruby-on-rails\/?related_post_from=36125\">\r\n        Ruby IDE\u00a0: les meilleurs IDE pour le d\u00e9veloppement Ruby on Rails  <\/a>\r\n\r\n        <\/div>\r\n      \r\n  <\/div>\r\n\r\n  <script>\r\n      <\/script>\r\n  <style>\r\n    .related-post {}\r\n\r\n    .related-post .post-list {\r\n      text-align: left;\r\n          }\r\n\r\n    .related-post .post-list .item {\r\n      margin: 10px;\r\n      padding: 10px;\r\n          }\r\n\r\n    .related-post .headline {\r\n      font-size: 14px !important;\r\n      color: #999999 !important;\r\n          }\r\n\r\n    .related-post .post-list .item .post_thumb {\r\n      max-height: 220px;\r\n      margin: 10px 0px;\r\n      padding: 0px;\r\n      display: block;\r\n          }\r\n\r\n    .related-post .post-list .item .post_title {\r\n      font-size: 14px;\r\n      color: #000000;\r\n      margin: 10px 0px;\r\n      padding: 0px;\r\n      display: block;\r\n      text-decoration: none;\r\n          }\r\n\r\n    .related-post .post-list .item .post_excerpt {\r\n      font-size: 12px;\r\n      color: #3f3f3f;\r\n      margin: 10px 0px;\r\n      padding: 0px;\r\n      display: block;\r\n      text-decoration: none;\r\n          }\r\n\r\n    .related-post .owl-dots .owl-dot {\r\n          }\r\n\r\n      <\/style>\r\n      <script>\r\n      jQuery(document).ready(function($) {\r\n        $(\".related-post .post-list\").owlCarousel({\r\n          items: 2,\r\n          responsiveClass: true,\r\n          responsive: {\r\n            0: {\r\n              items: 1,\r\n            },\r\n            768: {\r\n              items: 2,\r\n            },\r\n            1200: {\r\n              items: 2,\r\n            }\r\n          },\r\n                      rewind: true,\r\n                                loop: true,\r\n                                center: false,\r\n                                autoplay: true,\r\n            autoplayHoverPause: true,\r\n                                nav: true,\r\n            navSpeed: 1000,\r\n            navText: ['<i class=\"fas fa-chevron-left\"><\/i>', '<i class=\"fas fa-chevron-right\"><\/i>'],\r\n                                dots: false,\r\n            dotsSpeed: 1200,\r\n                                                    rtl: false,\r\n          \r\n        });\r\n      });\r\n    <\/script>\r\n  <\/div>","protected":false},"excerpt":{"rendered":"<p>Vous avez peut-\u00eatre d\u00e9j\u00e0 entendu parler de Sass (Syntactically Awesome StyleSheets) et vous vous y int\u00e9ressez, mais vous n'avez aucune id\u00e9e de la mani\u00e8re de le mettre en place ou de l'incorporer dans votre projet. Dans sa forme la plus basique, Sass est connu comme le processeur CCS, qui permet \u00e0 l'\u00e9criture CCS de devenir plus ...<\/p>\n<p class=\"read-more\"> <a class=\"\" href=\"https:\/\/www.railscarma.com\/fr\/blog\/ruby-regex-match-guide-with-examples\/\"> <span class=\"screen-reader-text\">Guide de correspondance des expressions rationnelles en Ruby (2026) avec exemples<\/span> Lire la suite \u00bb<\/a><\/p>","protected":false},"author":1,"featured_media":31784,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[384],"tags":[],"class_list":["post-26534","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-technical-articles"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.8 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Getting Started with Sass - Learning the Basics and Its Installation - RailsCarma - Ruby on Rails Development Company specializing in Offshore Development<\/title>\n<meta name=\"description\" content=\"Perhaps you already heard about Sass (Syntactically Awesome StyleSheets) and you are interested in it, but don\u2019t have an idea about how to set it up or\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.railscarma.com\/fr\/blog\/articles-techniques\/quest-ce-que-linstallation-des-bases-de-sass-sass\/\" \/>\n<meta property=\"og:locale\" content=\"fr_FR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Getting Started with Sass - Learning the Basics and Its Installation - RailsCarma - Ruby on Rails Development Company specializing in Offshore Development\" \/>\n<meta property=\"og:description\" content=\"Perhaps you already heard about Sass (Syntactically Awesome StyleSheets) and you are interested in it, but don\u2019t have an idea about how to set it up or\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.railscarma.com\/fr\/blog\/articles-techniques\/quest-ce-que-linstallation-des-bases-de-sass-sass\/\" \/>\n<meta property=\"og:site_name\" content=\"RailsCarma - Ruby on Rails Development Company specializing in Offshore Development\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/RailsCarma\/\" \/>\n<meta property=\"article:published_time\" content=\"2017-04-15T10:42:01+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-06-05T09:12:53+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.railscarma.com\/wp-content\/uploads\/2017\/04\/Sass-Basics-and-Its-Installation-1.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"800\" \/>\n\t<meta property=\"og:image:height\" content=\"300\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"admin\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@railscarma\" \/>\n<meta name=\"twitter:site\" content=\"@railscarma\" \/>\n<meta name=\"twitter:label1\" content=\"\u00c9crit par\" \/>\n\t<meta name=\"twitter:data1\" content=\"admin\" \/>\n\t<meta name=\"twitter:label2\" content=\"Dur\u00e9e de lecture estim\u00e9e\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.railscarma.com\/de\/blog\/technical-articles\/was-ist-die-sass-sass-basics-installation\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.railscarma.com\/de\/blog\/technical-articles\/was-ist-die-sass-sass-basics-installation\/\"},\"author\":{\"name\":\"admin\",\"@id\":\"https:\/\/www.railscarma.com\/#\/schema\/person\/5f2228a2dec7549056e709de6eb85d21\"},\"headline\":\"Getting Started with Sass &#8211; Learning the Basics and Its Installation\",\"datePublished\":\"2017-04-15T10:42:01+00:00\",\"dateModified\":\"2021-06-05T09:12:53+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.railscarma.com\/de\/blog\/technical-articles\/was-ist-die-sass-sass-basics-installation\/\"},\"wordCount\":583,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.railscarma.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.railscarma.com\/de\/blog\/technical-articles\/was-ist-die-sass-sass-basics-installation\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.railscarma.com\/wp-content\/uploads\/2017\/04\/Sass-Basics-and-Its-Installation-1.jpg\",\"articleSection\":[\"Technical Articles\"],\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.railscarma.com\/de\/blog\/technical-articles\/was-ist-die-sass-sass-basics-installation\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.railscarma.com\/de\/blog\/technical-articles\/was-ist-die-sass-sass-basics-installation\/\",\"url\":\"https:\/\/www.railscarma.com\/de\/blog\/technical-articles\/was-ist-die-sass-sass-basics-installation\/\",\"name\":\"Getting Started with Sass - Learning the Basics and Its Installation - RailsCarma - Ruby on Rails Development Company specializing in Offshore Development\",\"isPartOf\":{\"@id\":\"https:\/\/www.railscarma.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.railscarma.com\/de\/blog\/technical-articles\/was-ist-die-sass-sass-basics-installation\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.railscarma.com\/de\/blog\/technical-articles\/was-ist-die-sass-sass-basics-installation\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.railscarma.com\/wp-content\/uploads\/2017\/04\/Sass-Basics-and-Its-Installation-1.jpg\",\"datePublished\":\"2017-04-15T10:42:01+00:00\",\"dateModified\":\"2021-06-05T09:12:53+00:00\",\"description\":\"Perhaps you already heard about Sass (Syntactically Awesome StyleSheets) and you are interested in it, but don\u2019t have an idea about how to set it up or\",\"breadcrumb\":{\"@id\":\"https:\/\/www.railscarma.com\/de\/blog\/technical-articles\/was-ist-die-sass-sass-basics-installation\/#breadcrumb\"},\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.railscarma.com\/de\/blog\/technical-articles\/was-ist-die-sass-sass-basics-installation\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/www.railscarma.com\/de\/blog\/technical-articles\/was-ist-die-sass-sass-basics-installation\/#primaryimage\",\"url\":\"https:\/\/www.railscarma.com\/wp-content\/uploads\/2017\/04\/Sass-Basics-and-Its-Installation-1.jpg\",\"contentUrl\":\"https:\/\/www.railscarma.com\/wp-content\/uploads\/2017\/04\/Sass-Basics-and-Its-Installation-1.jpg\",\"width\":800,\"height\":300},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.railscarma.com\/de\/blog\/technical-articles\/was-ist-die-sass-sass-basics-installation\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.railscarma.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Getting Started with Sass &#8211; Learning the Basics and Its Installation\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.railscarma.com\/#website\",\"url\":\"https:\/\/www.railscarma.com\/\",\"name\":\"RailsCarma - Ruby on Rails Development Company specializing in Offshore Development\",\"description\":\"RailsCarma is a Ruby on Rails Development Company in Bangalore. We specialize in Offshore Ruby on Rails Development based out in USA and India. Hire experienced Ruby on Rails developers for the ultimate Web Experience.\",\"publisher\":{\"@id\":\"https:\/\/www.railscarma.com\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.railscarma.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"fr-FR\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.railscarma.com\/#organization\",\"name\":\"RailsCarma\",\"url\":\"https:\/\/www.railscarma.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/www.railscarma.com\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.railscarma.com\/wp-content\/uploads\/2020\/08\/railscarma_logo.png\",\"contentUrl\":\"https:\/\/www.railscarma.com\/wp-content\/uploads\/2020\/08\/railscarma_logo.png\",\"width\":200,\"height\":46,\"caption\":\"RailsCarma\"},\"image\":{\"@id\":\"https:\/\/www.railscarma.com\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/RailsCarma\/\",\"https:\/\/x.com\/railscarma\",\"https:\/\/www.linkedin.com\/company\/railscarma\/\",\"https:\/\/myspace.com\/railscarma\",\"https:\/\/in.pinterest.com\/railscarma\/\",\"https:\/\/www.youtube.com\/channel\/UCx3Wil-aAnDARuatTEyMdpg\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.railscarma.com\/#\/schema\/person\/5f2228a2dec7549056e709de6eb85d21\",\"name\":\"admin\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/www.railscarma.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/308867ca6c81f3aba146080c601000087180326f752c4116849ea9f514c6a4fa?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/308867ca6c81f3aba146080c601000087180326f752c4116849ea9f514c6a4fa?s=96&d=mm&r=g\",\"caption\":\"admin\"},\"sameAs\":[\"https:\/\/www.railscarma.com\/hire-ruby-on-rails-developer\/\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Premiers pas avec Sass - Apprendre les bases et son installation - RailsCarma - Soci\u00e9t\u00e9 de d\u00e9veloppement Ruby on Rails sp\u00e9cialis\u00e9e dans le d\u00e9veloppement offshore","description":"Peut-\u00eatre avez-vous d\u00e9j\u00e0 entendu parler de Sass (Syntaxically Awesome StyleSheets) et cela vous int\u00e9resse, mais vous n&#039;avez pas d&#039;id\u00e9e sur la fa\u00e7on de le configurer ou","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.railscarma.com\/fr\/blog\/articles-techniques\/quest-ce-que-linstallation-des-bases-de-sass-sass\/","og_locale":"fr_FR","og_type":"article","og_title":"Getting Started with Sass - Learning the Basics and Its Installation - RailsCarma - Ruby on Rails Development Company specializing in Offshore Development","og_description":"Perhaps you already heard about Sass (Syntactically Awesome StyleSheets) and you are interested in it, but don\u2019t have an idea about how to set it up or","og_url":"https:\/\/www.railscarma.com\/fr\/blog\/articles-techniques\/quest-ce-que-linstallation-des-bases-de-sass-sass\/","og_site_name":"RailsCarma - Ruby on Rails Development Company specializing in Offshore Development","article_publisher":"https:\/\/www.facebook.com\/RailsCarma\/","article_published_time":"2017-04-15T10:42:01+00:00","article_modified_time":"2021-06-05T09:12:53+00:00","og_image":[{"width":800,"height":300,"url":"https:\/\/www.railscarma.com\/wp-content\/uploads\/2017\/04\/Sass-Basics-and-Its-Installation-1.jpg","type":"image\/jpeg"}],"author":"admin","twitter_card":"summary_large_image","twitter_creator":"@railscarma","twitter_site":"@railscarma","twitter_misc":{"\u00c9crit par":"admin","Dur\u00e9e de lecture estim\u00e9e":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.railscarma.com\/de\/blog\/technical-articles\/was-ist-die-sass-sass-basics-installation\/#article","isPartOf":{"@id":"https:\/\/www.railscarma.com\/de\/blog\/technical-articles\/was-ist-die-sass-sass-basics-installation\/"},"author":{"name":"admin","@id":"https:\/\/www.railscarma.com\/#\/schema\/person\/5f2228a2dec7549056e709de6eb85d21"},"headline":"Getting Started with Sass &#8211; Learning the Basics and Its Installation","datePublished":"2017-04-15T10:42:01+00:00","dateModified":"2021-06-05T09:12:53+00:00","mainEntityOfPage":{"@id":"https:\/\/www.railscarma.com\/de\/blog\/technical-articles\/was-ist-die-sass-sass-basics-installation\/"},"wordCount":583,"commentCount":0,"publisher":{"@id":"https:\/\/www.railscarma.com\/#organization"},"image":{"@id":"https:\/\/www.railscarma.com\/de\/blog\/technical-articles\/was-ist-die-sass-sass-basics-installation\/#primaryimage"},"thumbnailUrl":"https:\/\/www.railscarma.com\/wp-content\/uploads\/2017\/04\/Sass-Basics-and-Its-Installation-1.jpg","articleSection":["Technical Articles"],"inLanguage":"fr-FR","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.railscarma.com\/de\/blog\/technical-articles\/was-ist-die-sass-sass-basics-installation\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.railscarma.com\/de\/blog\/technical-articles\/was-ist-die-sass-sass-basics-installation\/","url":"https:\/\/www.railscarma.com\/de\/blog\/technical-articles\/was-ist-die-sass-sass-basics-installation\/","name":"Premiers pas avec Sass - Apprendre les bases et son installation - RailsCarma - Soci\u00e9t\u00e9 de d\u00e9veloppement Ruby on Rails sp\u00e9cialis\u00e9e dans le d\u00e9veloppement offshore","isPartOf":{"@id":"https:\/\/www.railscarma.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.railscarma.com\/de\/blog\/technical-articles\/was-ist-die-sass-sass-basics-installation\/#primaryimage"},"image":{"@id":"https:\/\/www.railscarma.com\/de\/blog\/technical-articles\/was-ist-die-sass-sass-basics-installation\/#primaryimage"},"thumbnailUrl":"https:\/\/www.railscarma.com\/wp-content\/uploads\/2017\/04\/Sass-Basics-and-Its-Installation-1.jpg","datePublished":"2017-04-15T10:42:01+00:00","dateModified":"2021-06-05T09:12:53+00:00","description":"Peut-\u00eatre avez-vous d\u00e9j\u00e0 entendu parler de Sass (Syntaxically Awesome StyleSheets) et cela vous int\u00e9resse, mais vous n&#039;avez pas d&#039;id\u00e9e sur la fa\u00e7on de le configurer ou","breadcrumb":{"@id":"https:\/\/www.railscarma.com\/de\/blog\/technical-articles\/was-ist-die-sass-sass-basics-installation\/#breadcrumb"},"inLanguage":"fr-FR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.railscarma.com\/de\/blog\/technical-articles\/was-ist-die-sass-sass-basics-installation\/"]}]},{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/www.railscarma.com\/de\/blog\/technical-articles\/was-ist-die-sass-sass-basics-installation\/#primaryimage","url":"https:\/\/www.railscarma.com\/wp-content\/uploads\/2017\/04\/Sass-Basics-and-Its-Installation-1.jpg","contentUrl":"https:\/\/www.railscarma.com\/wp-content\/uploads\/2017\/04\/Sass-Basics-and-Its-Installation-1.jpg","width":800,"height":300},{"@type":"BreadcrumbList","@id":"https:\/\/www.railscarma.com\/de\/blog\/technical-articles\/was-ist-die-sass-sass-basics-installation\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.railscarma.com\/"},{"@type":"ListItem","position":2,"name":"Getting Started with Sass &#8211; Learning the Basics and Its Installation"}]},{"@type":"WebSite","@id":"https:\/\/www.railscarma.com\/#website","url":"https:\/\/www.railscarma.com\/","name":"RailsCarma - Soci\u00e9t\u00e9 de d\u00e9veloppement Ruby on Rails sp\u00e9cialis\u00e9e dans le d\u00e9veloppement offshore","description":"RailsCarma est une soci\u00e9t\u00e9 de d\u00e9veloppement Ruby on Rails \u00e0 Bangalore. Nous sommes sp\u00e9cialis\u00e9s dans le d\u00e9veloppement offshore Ruby on Rails, bas\u00e9s aux \u00c9tats-Unis et en Inde. Embauchez des d\u00e9veloppeurs Ruby on Rails exp\u00e9riment\u00e9s pour une exp\u00e9rience Web ultime.","publisher":{"@id":"https:\/\/www.railscarma.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.railscarma.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"fr-FR"},{"@type":"Organization","@id":"https:\/\/www.railscarma.com\/#organization","name":"RailsCarma","url":"https:\/\/www.railscarma.com\/","logo":{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/www.railscarma.com\/#\/schema\/logo\/image\/","url":"https:\/\/www.railscarma.com\/wp-content\/uploads\/2020\/08\/railscarma_logo.png","contentUrl":"https:\/\/www.railscarma.com\/wp-content\/uploads\/2020\/08\/railscarma_logo.png","width":200,"height":46,"caption":"RailsCarma"},"image":{"@id":"https:\/\/www.railscarma.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/RailsCarma\/","https:\/\/x.com\/railscarma","https:\/\/www.linkedin.com\/company\/railscarma\/","https:\/\/myspace.com\/railscarma","https:\/\/in.pinterest.com\/railscarma\/","https:\/\/www.youtube.com\/channel\/UCx3Wil-aAnDARuatTEyMdpg"]},{"@type":"Person","@id":"https:\/\/www.railscarma.com\/#\/schema\/person\/5f2228a2dec7549056e709de6eb85d21","name":"administrateur","image":{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/www.railscarma.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/308867ca6c81f3aba146080c601000087180326f752c4116849ea9f514c6a4fa?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/308867ca6c81f3aba146080c601000087180326f752c4116849ea9f514c6a4fa?s=96&d=mm&r=g","caption":"admin"},"sameAs":["https:\/\/www.railscarma.com\/hire-ruby-on-rails-developer\/"]}]}},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/www.railscarma.com\/fr\/wp-json\/wp\/v2\/posts\/26534","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.railscarma.com\/fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.railscarma.com\/fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.railscarma.com\/fr\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.railscarma.com\/fr\/wp-json\/wp\/v2\/comments?post=26534"}],"version-history":[{"count":0,"href":"https:\/\/www.railscarma.com\/fr\/wp-json\/wp\/v2\/posts\/26534\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.railscarma.com\/fr\/wp-json\/wp\/v2\/media\/31784"}],"wp:attachment":[{"href":"https:\/\/www.railscarma.com\/fr\/wp-json\/wp\/v2\/media?parent=26534"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.railscarma.com\/fr\/wp-json\/wp\/v2\/categories?post=26534"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.railscarma.com\/fr\/wp-json\/wp\/v2\/tags?post=26534"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}