{"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":"was-ist-die-sass-sass-basics-installation","status":"publish","type":"post","link":"https:\/\/www.railscarma.com\/de\/blog\/fachartikel\/was-ist-die-sass-sass-basics-installation\/","title":{"rendered":"Erste Schritte mit Sass \u2013 Erlernen der Grundlagen und seiner 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\">Vielleicht haben Sie bereits von Sass (Syntactically Awesome StyleSheets) geh\u00f6rt und sind daran interessiert, haben aber keine Ahnung, wie Sie es einrichten oder in Ihr Projekt integrieren k\u00f6nnen. In seiner einfachsten Form ist Sass als CCS-Prozessor bekannt, der es erm\u00f6glicht, das CCS-Schreiben effizienter und schneller zu gestalten. Wir werden die Grundlagen und Installationen von Sass f\u00fcr Mac und Windows besprechen.<\/p>\n\n<h2>Das grundlegende Wissen \u00fcber Sass<\/h2>\n<p align=\"justify\">Es gibt einige Lernkurven, wenn es um die Verwendung und Einrichtung von Sass geht. Damit Sie mit dem Sass-Projekt vorankommen k\u00f6nnen, m\u00fcssen Sie zumindest \u00fcber Grundkenntnisse in HTML und CSS verf\u00fcgen. Sie m\u00fcssen mit CSS vertraut oder kompetent sein, bevor Sie versuchen, den CSS-Prozessor Sass zu erlernen.<\/p>\n<p align=\"justify\">Wenn Sie jemals die Farben in Ihrem Stylesheet viel Zeit ge\u00e4ndert haben oder sich eine bessere M\u00f6glichkeit gew\u00fcnscht haben, Ihr Stylesheet bereits mit den Herstellerpr\u00e4fixen versehen war oder Ihnen aufgefallen ist, dass Ihre Stylesheets l\u00e4nger und schwer zu warten sind, dann liegen das vielleicht daran reichten aus, um das Studium von Sass auszuprobieren. Ich werde einige der Begriffe zusammenfassen, damit Sie die Grundlagen von Sass verstehen k\u00f6nnen.<\/p>\n\n<ul>\n \t<li><strong>Variable<\/strong> \u2013 Es ist ein Speichercontainer f\u00fcr CSS-Werte wie Zahlen und Farben. Die Syntax wurde als \u201e$variable\u201c geschrieben. Dieser Code kann im gesamten Stylesheet verwendet werden, nachdem Sie ihn definiert haben.<\/li>\n \t<li><strong>Verschachtelung<\/strong> \u2013 Es reduziert die Wiederholungen im Code und kann das Schreiben von CSS einfacher und schneller machen.<\/li>\n \t<li><strong>Teilt\u00f6ne<\/strong> \u2013 Dies sind die CSS-Dateien, die mit dem Unterstrich \u201e_partial.scss\u201c beginnen und nicht in eigene CSS-Dateien kompiliert, sondern in die Hauptdatei importiert werden.<\/li>\n \t<li><strong>Importieren<\/strong> \u2013 Verwenden Sie \u201e@import\u201c, um alle Teilt\u00f6ne in einer einzigen Datei zusammenzustellen.<\/li>\n \t<li><strong>Mixins<\/strong> \u2013 Verwenden Sie \u201e@mixin\u201c f\u00fcr das sich wiederholende CSS, beispielsweise wenn die Herstellerpr\u00e4fixe erforderlich waren.<\/li>\n \t<li><strong>Verl\u00e4ngern<\/strong> \u2013 Verwenden Sie \u201e@extend\u201c, um einige Aspekte des Schl\u00fcssels ansonsten von Elementen derselben Identit\u00e4t zu \u00e4ndern, beispielsweise einer Gruppe von Schaltfl\u00e4chen mit unterschiedlichen Farben.<\/li>\n \t<li><strong>Betreiber<\/strong> \u2013 Dadurch kann der Benutzer mathematische Berechnungen im CSS verwenden, z. B. die Breite verschiedener Teile des Layouts definieren.<\/li>\n<\/ul>\n<h2>Sass auf Mac und Windows installieren<\/h2>\n<p align=\"justify\">Sass l\u00e4uft auf der Programmiersprache Ruby, daher muss Ruby auf Ihrem Computer installiert sein. F\u00fcr Mac-Benutzer ist Ruby auf dem OSX bereits vorinstalliert. \u00dcberpr\u00fcfen Sie, ob Sie eine aktualisierte Version verwenden, indem Sie \u201eruby \u2013 v\u201c eingeben. Wenn die Zahl niedriger als 2.0.0 ist, geben Sie zum Aktualisieren \u201edo gem install ruby\u201c ein. Jetzt k\u00f6nnen Sie mit der Installation von Sass beginnen.<\/p>\n<p align=\"justify\">Allerdings ist die Installation unter Windows etwas kniffliger, da dort kein Ruby installiert ist. Wenn Sie eine 64-Bit-Version von Windows 7 ausf\u00fchren, w\u00e4hlen Sie Ruby 2.1.7 (x54). Das Gleiche muss auch f\u00fcr Windows 8 und 10 durchgef\u00fchrt werden. Stellen Sie sicher, dass Sie \u201eRuby-ausf\u00fchrbare Datei zu Ihrem PATH hinzuf\u00fcgen\u201c ausw\u00e4hlen und dann fortfahren. Sobald Ruby installiert ist, \u00f6ffnen Sie die Eingabeaufforderung und best\u00e4tigen Sie, dass Ruby installiert wurde. Dann k\u00f6nnen Sie Sass installieren, indem Sie \u201e<strong>gem sass installieren<\/strong>\u201d und schon sind Sie fertig.<\/p>\n<strong><a href=\"https:\/\/www.railscarma.com\/de\/\" target=\"_blank\" rel=\"noopener noreferrer\">SchienenCarma<\/a><\/strong> hat von Anfang an am Ruby on Rails-Framework gearbeitet und \u00fcber 250 RoR-Projekte abgewickelt. Schauen Sie sich unsere an <a href=\"\/de\/portfolio\/\" target=\"_blank\" rel=\"noopener noreferrer\"><strong>Portfolio<\/strong><\/a> um zu verstehen, wie wir durch unsere Bereitstellung dazu beitragen, die Form der Softwareindustrie zu ver\u00e4ndern <a href=\"https:\/\/www.railscarma.com\/de\/stellen-sie-einen-ruby-on-rails-entwickler-ein\/\">Ruby on Rails-Entwickler<\/a>. <a href=\"\/de\/kontaktiere-uns\/\">Nehmen Sie jetzt Kontakt mit uns auf!<\/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\">Abonnieren Sie die neuesten Updates<\/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=\"Lader\"><\/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=\"E-Mail-Adresse\">\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=\"Name\">\r\n<\/p>\r\n<p>\r\n    <input type=\"submit\" id=\"invisible\" class=\"sib-default-btn\" value=\"Abonnieren\">\r\n<\/p>\t\t\t\t<\/div>\n\t\t\t<input type=\"hidden\" name=\"trp-form-language\" value=\"de\"\/><\/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\">zusammenh\u00e4ngende Posts<\/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=\"Kaminari-Juwel\" href=\"https:\/\/www.railscarma.com\/de\/blog\/fachartikel\/kaminari-juwel\/?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=\"Kaminari-Juwel\" 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=\"Kaminari-Juwel\" href=\"https:\/\/www.railscarma.com\/de\/blog\/fachartikel\/kaminari-juwel\/?related_post_from=37277\">\r\n        Kaminari-Juwel  <\/a>\r\n\r\n        <\/div>\r\n              <div class=\"item\">\r\n            <div class=\"thumb post_thumb\">\r\n    <a  title=\"Warum sollte man im Jahr 2026 Ruby on Rails-Entwickler anheuern?\" href=\"https:\/\/www.railscarma.com\/de\/blog\/ror\/warum-sollte-man-ruby-on-rails-entwickler-engagieren\/?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=\"Warum sollte man im Jahr 2022 Ruby-on-Rails-Entwickler einstellen?\" 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=\"Warum sollte man im Jahr 2026 Ruby on Rails-Entwickler anheuern?\" href=\"https:\/\/www.railscarma.com\/de\/blog\/ror\/warum-sollte-man-ruby-on-rails-entwickler-engagieren\/?related_post_from=30627\">\r\n        Warum sollte man im Jahr 2026 Ruby on Rails-Entwickler anheuern?  <\/a>\r\n\r\n        <\/div>\r\n              <div class=\"item\">\r\n            <div class=\"thumb post_thumb\">\r\n    <a  title=\"Bedeutung der Softwarearchitektur in der Entwicklung von Unternehmenssoftware\" href=\"https:\/\/www.railscarma.com\/de\/blog\/ror\/bedeutung-der-softwarearchitektur-bei-der-entwicklung-von-unternehmenssoftware\/?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=\"Bedeutung der Softwarearchitektur in der Entwicklung von Unternehmenssoftware\" 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=\"Bedeutung der Softwarearchitektur in der Entwicklung von Unternehmenssoftware\" href=\"https:\/\/www.railscarma.com\/de\/blog\/ror\/bedeutung-der-softwarearchitektur-bei-der-entwicklung-von-unternehmenssoftware\/?related_post_from=36250\">\r\n        Bedeutung der Softwarearchitektur in der Entwicklung von Unternehmenssoftware  <\/a>\r\n\r\n        <\/div>\r\n              <div class=\"item\">\r\n            <div class=\"thumb post_thumb\">\r\n    <a  title=\"Ruby IDE: Die besten IDEs f\u00fcr die Ruby on Rails-Entwicklung\" href=\"https:\/\/www.railscarma.com\/de\/blog\/ror\/ruby-idee-die-besten-ideen-fur-die-ruby-on-rails-entwicklung\/?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=\"BESTE IDEEN F\u00dcR DIE RUBY ON RAILS-ENTWICKLUNG\" 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: Die besten IDEs f\u00fcr die Ruby on Rails-Entwicklung\" href=\"https:\/\/www.railscarma.com\/de\/blog\/ror\/ruby-idee-die-besten-ideen-fur-die-ruby-on-rails-entwicklung\/?related_post_from=36125\">\r\n        Ruby IDE: Die besten IDEs f\u00fcr die Ruby on Rails-Entwicklung  <\/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>Vielleicht haben Sie schon von Sass (Syntactically Awesome StyleSheets) geh\u00f6rt und interessieren sich daf\u00fcr, haben aber keine Ahnung, wie Sie es einrichten oder in Ihr Projekt einbauen k\u00f6nnen. In der grundlegendsten Form ist Sass als CCS-Prozessor bekannt, der es erm\u00f6glicht, die CCS-Schreibweise zu ...<\/p>\n<p class=\"read-more\"> <a class=\"\" href=\"https:\/\/www.railscarma.com\/de\/blog\/ruby-regex-match-guide-with-examples\/\"> <span class=\"screen-reader-text\">Ruby Regex Match Guide (2026) mit Beispielen<\/span> Weiterlesen \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\/de\/blog\/fachartikel\/was-ist-die-sass-sass-basics-installation\/\" \/>\n<meta property=\"og:locale\" content=\"de_DE\" \/>\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\/de\/blog\/fachartikel\/was-ist-die-sass-sass-basics-installation\/\" \/>\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=\"Verfasst von\" \/>\n\t<meta name=\"twitter:data1\" content=\"admin\" \/>\n\t<meta name=\"twitter:label2\" content=\"Gesch\u00e4tzte Lesezeit\" \/>\n\t<meta name=\"twitter:data2\" content=\"3\u00a0Minuten\" \/>\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\":\"de\",\"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\":\"de\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.railscarma.com\/de\/blog\/technical-articles\/was-ist-die-sass-sass-basics-installation\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@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\":\"de\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.railscarma.com\/#organization\",\"name\":\"RailsCarma\",\"url\":\"https:\/\/www.railscarma.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@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\":\"de\",\"@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":"Erste Schritte mit Sass \u2013 Erlernen der Grundlagen und seiner Installation \u2013 RailsCarma \u2013 Ruby on Rails-Entwicklungsunternehmen, spezialisiert auf Offshore-Entwicklung","description":"Vielleicht haben Sie bereits von Sass (Syntactically Awesome StyleSheets) geh\u00f6rt und sind daran interessiert, haben aber keine Ahnung, wie man es einrichtet bzw","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\/de\/blog\/fachartikel\/was-ist-die-sass-sass-basics-installation\/","og_locale":"de_DE","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\/de\/blog\/fachartikel\/was-ist-die-sass-sass-basics-installation\/","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":{"Verfasst von":"admin","Gesch\u00e4tzte Lesezeit":"3\u00a0Minuten"},"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":"de","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":"Erste Schritte mit Sass \u2013 Erlernen der Grundlagen und seiner Installation \u2013 RailsCarma \u2013 Ruby on Rails-Entwicklungsunternehmen, spezialisiert auf Offshore-Entwicklung","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":"Vielleicht haben Sie bereits von Sass (Syntactically Awesome StyleSheets) geh\u00f6rt und sind daran interessiert, haben aber keine Ahnung, wie man es einrichtet bzw","breadcrumb":{"@id":"https:\/\/www.railscarma.com\/de\/blog\/technical-articles\/was-ist-die-sass-sass-basics-installation\/#breadcrumb"},"inLanguage":"de","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.railscarma.com\/de\/blog\/technical-articles\/was-ist-die-sass-sass-basics-installation\/"]}]},{"@type":"ImageObject","inLanguage":"de","@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 \u2013 Ruby on Rails-Entwicklungsunternehmen, spezialisiert auf Offshore-Entwicklung","description":"RailsCarma ist ein Ruby on Rails-Entwicklungsunternehmen in Bangalore. Wir sind auf die Offshore-Ruby-on-Rails-Entwicklung mit Sitz in den USA und Indien spezialisiert. Stellen Sie erfahrene Ruby on Rails-Entwickler f\u00fcr das ultimative Web-Erlebnis ein.","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":"de"},{"@type":"Organization","@id":"https:\/\/www.railscarma.com\/#organization","name":"SchienenCarma","url":"https:\/\/www.railscarma.com\/","logo":{"@type":"ImageObject","inLanguage":"de","@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":"Administrator","image":{"@type":"ImageObject","inLanguage":"de","@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\/de\/wp-json\/wp\/v2\/posts\/26534","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.railscarma.com\/de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.railscarma.com\/de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.railscarma.com\/de\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.railscarma.com\/de\/wp-json\/wp\/v2\/comments?post=26534"}],"version-history":[{"count":0,"href":"https:\/\/www.railscarma.com\/de\/wp-json\/wp\/v2\/posts\/26534\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.railscarma.com\/de\/wp-json\/wp\/v2\/media\/31784"}],"wp:attachment":[{"href":"https:\/\/www.railscarma.com\/de\/wp-json\/wp\/v2\/media?parent=26534"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.railscarma.com\/de\/wp-json\/wp\/v2\/categories?post=26534"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.railscarma.com\/de\/wp-json\/wp\/v2\/tags?post=26534"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}