tag:blogger.com,1999:blog-26819768943097712192024-03-27T02:35:49.666-04:00Dudo, Investigo, Aplico y Comparto.Me gusta compartir lo que aprendo, y aprender para compartir. «Learning is good but sharing is cool» (by LMB)Lizzy Mendivilhttp://www.blogger.com/profile/17037414623539252518noreply@blogger.comBlogger195125tag:blogger.com,1999:blog-2681976894309771219.post-34516485102392892402023-08-30T12:12:00.004-04:002023-08-30T12:12:28.541-04:00Create new repo from terminal in macOS<p style="font-family: "Helvetica Neue"; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-size-adjust: none; font-size: 13px; font-stretch: normal; font-style: normal; font-variant-alternates: normal; font-variant-caps: normal; font-variant-east-asian: normal; font-variant-ligatures: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; line-height: normal; margin: 0px;">In Windows, we are used to right click into our folder and open With GitBash. Let’s do something similar in macOs</p><p style="font-family: "Helvetica Neue"; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-size-adjust: none; font-size: 13px; font-stretch: normal; font-style: normal; font-variant-alternates: normal; font-variant-caps: normal; font-variant-east-asian: normal; font-variant-ligatures: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; line-height: normal; margin: 0px; min-height: 15px;"><br /></p><p style="font-family: "Helvetica Neue"; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-size-adjust: none; font-size: 13px; font-stretch: normal; font-style: normal; font-variant-alternates: normal; font-variant-caps: normal; font-variant-east-asian: normal; font-variant-ligatures: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; line-height: normal; margin: 0px;">Go to Finder (it’s in the Dock), open Documents, create new folder, let’s say “MyRepos”, Ctrol+Click the folder and New terminal at Folder.</p><p style="font-family: "Helvetica Neue"; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-size-adjust: none; font-size: 13px; font-stretch: normal; font-style: normal; font-variant-alternates: normal; font-variant-caps: normal; font-variant-east-asian: normal; font-variant-ligatures: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; line-height: normal; margin: 0px;">In the terminal, continue doing what you already know…</p><p style="font-family: "Helvetica Neue"; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-size-adjust: none; font-size: 13px; font-stretch: normal; font-style: normal; font-variant-alternates: normal; font-variant-caps: normal; font-variant-east-asian: normal; font-variant-ligatures: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; line-height: normal; margin: 0px; min-height: 15px;"><br /></p><p style="font-family: "Helvetica Neue"; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-size-adjust: none; font-size: 13px; font-stretch: normal; font-style: normal; font-variant-alternates: normal; font-variant-caps: normal; font-variant-east-asian: normal; font-variant-ligatures: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; line-height: normal; margin: 0px;">git init</p><p style="font-family: "Helvetica Neue"; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-size-adjust: none; font-size: 13px; font-stretch: normal; font-style: normal; font-variant-alternates: normal; font-variant-caps: normal; font-variant-east-asian: normal; font-variant-ligatures: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; line-height: normal; margin: 0px;">git add …</p><p style="font-family: "Helvetica Neue"; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-size-adjust: none; font-size: 13px; font-stretch: normal; font-style: normal; font-variant-alternates: normal; font-variant-caps: normal; font-variant-east-asian: normal; font-variant-ligatures: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; line-height: normal; margin: 0px;">git commit …</p><p style="font-family: "Helvetica Neue"; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-size-adjust: none; font-size: 13px; font-stretch: normal; font-style: normal; font-variant-alternates: normal; font-variant-caps: normal; font-variant-east-asian: normal; font-variant-ligatures: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; line-height: normal; margin: 0px;">Blah blah</p>Lizzy Mendivilhttp://www.blogger.com/profile/17037414623539252518noreply@blogger.com0tag:blogger.com,1999:blog-2681976894309771219.post-25389575773135112332023-08-30T11:26:00.003-04:002023-08-30T11:26:36.091-04:00Install and Config GIT on MAC<p style="font-family: "Helvetica Neue"; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-size-adjust: none; font-size: 13px; font-stretch: normal; font-style: normal; font-variant-alternates: normal; font-variant-caps: normal; font-variant-east-asian: normal; font-variant-ligatures: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; line-height: normal; margin: 0px;"><br /></p><p style="font-family: "Helvetica Neue"; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-size-adjust: none; font-size: 13px; font-stretch: normal; font-style: normal; font-variant-alternates: normal; font-variant-caps: normal; font-variant-east-asian: normal; font-variant-ligatures: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; line-height: normal; margin: 0px;">The best option to install GIT in Mac is thru Homebrew. So, you should install it first</p><p style="font-family: "Helvetica Neue"; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-size-adjust: none; font-size: 13px; font-stretch: normal; font-style: normal; font-variant-alternates: normal; font-variant-caps: normal; font-variant-east-asian: normal; font-variant-ligatures: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; line-height: normal; margin: 0px; min-height: 15px;"><br /></p><p style="font-family: "Helvetica Neue"; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-size-adjust: none; font-size: 13px; font-stretch: normal; font-style: normal; font-variant-alternates: normal; font-variant-caps: normal; font-variant-east-asian: normal; font-variant-ligatures: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; line-height: normal; margin: 0px;">Open launchpad, search by “terminal”</p><p style="font-family: "Helvetica Neue"; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-size-adjust: none; font-size: 13px; font-stretch: normal; font-style: normal; font-variant-alternates: normal; font-variant-caps: normal; font-variant-east-asian: normal; font-variant-ligatures: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; line-height: normal; margin: 0px;">Run this command:</p><p style="font-family: "Helvetica Neue"; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-size-adjust: none; font-size: 13px; font-stretch: normal; font-style: normal; font-variant-alternates: normal; font-variant-caps: normal; font-variant-east-asian: normal; font-variant-ligatures: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; line-height: normal; margin: 0px;">/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"</p><p style="font-family: "Helvetica Neue"; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-size-adjust: none; font-size: 13px; font-stretch: normal; font-style: normal; font-variant-alternates: normal; font-variant-caps: normal; font-variant-east-asian: normal; font-variant-ligatures: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; line-height: normal; margin: 0px; min-height: 15px;"><br /></p><p style="font-family: "Helvetica Neue"; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-size-adjust: none; font-size: 13px; font-stretch: normal; font-style: normal; font-variant-alternates: normal; font-variant-caps: normal; font-variant-east-asian: normal; font-variant-ligatures: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; line-height: normal; margin: 0px;">(Visit the official website to get the news: <a href="https://brew.sh"><span style="color: #dca10d;">https://brew.sh</span></a>)</p><p style="font-family: "Helvetica Neue"; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-size-adjust: none; font-size: 13px; font-stretch: normal; font-style: normal; font-variant-alternates: normal; font-variant-caps: normal; font-variant-east-asian: normal; font-variant-ligatures: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; line-height: normal; margin: 0px; min-height: 15px;"><br /></p><p style="font-family: "Helvetica Neue"; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-size-adjust: none; font-size: 13px; font-stretch: normal; font-style: normal; font-variant-alternates: normal; font-variant-caps: normal; font-variant-east-asian: normal; font-variant-ligatures: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; line-height: normal; margin: 0px;">All you need to do is to wait and read the console. The console will ask you to do something (copy a command, past it and run it)</p><p style="font-family: "Helvetica Neue"; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-size-adjust: none; font-size: 13px; font-stretch: normal; font-style: normal; font-variant-alternates: normal; font-variant-caps: normal; font-variant-east-asian: normal; font-variant-ligatures: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; line-height: normal; margin: 0px; min-height: 15px;"><br /></p><p style="font-family: "Helvetica Neue"; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-size-adjust: none; font-size: 13px; font-stretch: normal; font-style: normal; font-variant-alternates: normal; font-variant-caps: normal; font-variant-east-asian: normal; font-variant-ligatures: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; line-height: normal; margin: 0px;">Now you are ready to install GIT thru this command:</p><p style="font-family: "Helvetica Neue"; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-size-adjust: none; font-size: 13px; font-stretch: normal; font-style: normal; font-variant-alternates: normal; font-variant-caps: normal; font-variant-east-asian: normal; font-variant-ligatures: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; line-height: normal; margin: 0px;">brew install git (Visit the official website to get the news: <a href="https://git-scm.com/download/mac"><span style="color: #dca10d;">https://git-scm.com/download/mac</span></a>)</p><p style="font-family: "Helvetica Neue"; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-size-adjust: none; font-size: 13px; font-stretch: normal; font-style: normal; font-variant-alternates: normal; font-variant-caps: normal; font-variant-east-asian: normal; font-variant-ligatures: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; line-height: normal; margin: 0px; min-height: 15px;"><br /></p><p style="font-family: "Helvetica Neue"; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-size-adjust: none; font-size: 13px; font-stretch: normal; font-style: normal; font-variant-alternates: normal; font-variant-caps: normal; font-variant-east-asian: normal; font-variant-ligatures: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; line-height: normal; margin: 0px;">Run git —version to confirm you already have git installed</p><p style="font-family: "Helvetica Neue"; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-size-adjust: none; font-size: 13px; font-stretch: normal; font-style: normal; font-variant-alternates: normal; font-variant-caps: normal; font-variant-east-asian: normal; font-variant-ligatures: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; line-height: normal; margin: 0px; min-height: 15px;"><br /></p><p style="font-family: "Helvetica Neue"; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-size-adjust: none; font-size: 13px; font-stretch: normal; font-style: normal; font-variant-alternates: normal; font-variant-caps: normal; font-variant-east-asian: normal; font-variant-ligatures: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; line-height: normal; margin: 0px;">Unlike Windows, you will not get a new terminal</p><p style="font-family: "Helvetica Neue"; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-size-adjust: none; font-size: 13px; font-stretch: normal; font-style: normal; font-variant-alternates: normal; font-variant-caps: normal; font-variant-east-asian: normal; font-variant-ligatures: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; line-height: normal; margin: 0px; min-height: 15px;"><br /></p><p style="font-family: "Helvetica Neue"; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-size-adjust: none; font-size: 13px; font-stretch: normal; font-style: normal; font-variant-alternates: normal; font-variant-caps: normal; font-variant-east-asian: normal; font-variant-ligatures: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; line-height: normal; margin: 0px;">Now you have GIT, next step is to configure GIT</p><p style="font-family: "Helvetica Neue"; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-size-adjust: none; font-size: 13px; font-stretch: normal; font-style: normal; font-variant-alternates: normal; font-variant-caps: normal; font-variant-east-asian: normal; font-variant-ligatures: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; line-height: normal; margin: 0px; min-height: 15px;"><br /></p><p style="font-family: "Helvetica Neue"; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-size-adjust: none; font-size: 13px; font-stretch: normal; font-style: normal; font-variant-alternates: normal; font-variant-caps: normal; font-variant-east-asian: normal; font-variant-ligatures: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; line-height: normal; margin: 0px;">In the same terminal, run this:</p><p style="font-family: "Helvetica Neue"; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-size-adjust: none; font-size: 13px; font-stretch: normal; font-style: normal; font-variant-alternates: normal; font-variant-caps: normal; font-variant-east-asian: normal; font-variant-ligatures: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; line-height: normal; margin: 0px; min-height: 15px;"><br /></p><p style="font-family: "Helvetica Neue"; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-size-adjust: none; font-size: 13px; font-stretch: normal; font-style: normal; font-variant-alternates: normal; font-variant-caps: normal; font-variant-east-asian: normal; font-variant-ligatures: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; line-height: normal; margin: 0px;">git config —global user.name “your-username”</p><p style="font-family: "Helvetica Neue"; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-size-adjust: none; font-size: 13px; font-stretch: normal; font-style: normal; font-variant-alternates: normal; font-variant-caps: normal; font-variant-east-asian: normal; font-variant-ligatures: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; line-height: normal; margin: 0px;">git config —global user.email “your-email”</p><p style="font-family: "Helvetica Neue"; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-size-adjust: none; font-size: 13px; font-stretch: normal; font-style: normal; font-variant-alternates: normal; font-variant-caps: normal; font-variant-east-asian: normal; font-variant-ligatures: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; line-height: normal; margin: 0px; min-height: 15px;"><br /></p><p style="font-family: "Helvetica Neue"; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-size-adjust: none; font-size: 13px; font-stretch: normal; font-style: normal; font-variant-alternates: normal; font-variant-caps: normal; font-variant-east-asian: normal; font-variant-ligatures: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; line-height: normal; margin: 0px;">You can see your configuration running this:</p><p style="font-family: "Helvetica Neue"; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-size-adjust: none; font-size: 13px; font-stretch: normal; font-style: normal; font-variant-alternates: normal; font-variant-caps: normal; font-variant-east-asian: normal; font-variant-ligatures: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; line-height: normal; margin: 0px;">git config —list</p><p style="font-family: "Helvetica Neue"; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-size-adjust: none; font-size: 13px; font-stretch: normal; font-style: normal; font-variant-alternates: normal; font-variant-caps: normal; font-variant-east-asian: normal; font-variant-ligatures: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; line-height: normal; margin: 0px; min-height: 15px;"><br /></p><p style="font-family: "Helvetica Neue"; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-size-adjust: none; font-size: 13px; font-stretch: normal; font-style: normal; font-variant-alternates: normal; font-variant-caps: normal; font-variant-east-asian: normal; font-variant-ligatures: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; line-height: normal; margin: 0px;">Voila</p>Lizzy Mendivilhttp://www.blogger.com/profile/17037414623539252518noreply@blogger.com0tag:blogger.com,1999:blog-2681976894309771219.post-31457413381591798942022-11-04T14:42:00.006-04:002023-01-18T09:42:16.289-04:00Pattern for a route without slash at the end (regex)<p> Hi guys! I want to share with you a regex to use as a patter for entering a route:</p><p>valid:</p><p>/something123</p><p>/something/somethingelse/thiselse</p><p>not valid:</p><p>/*-*-*-*-</p><p>/something/*=*-=</p><p>/something123/</p><p>The regex is:</p><p><span class="pl-c1" style="background-color: #e6ffec; box-sizing: border-box; color: var(--color-prettylights-syntax-constant); font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; font-size: 12px; white-space: pre;">/</span><span class="pl-cce" style="background-color: #e6ffec; box-sizing: border-box; color: #0a3069; font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; font-size: 12px; white-space: pre;">^</span><span class="pl-kos" style="background-color: #e6ffec; box-sizing: border-box; color: #0a3069; font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; font-size: 12px; white-space: pre;">(?:</span><span class="pl-cce" style="background-color: #e6ffec; box-sizing: border-box; color: #0a3069; font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; font-size: 12px; white-space: pre;">\/</span><span class="pl-kos" style="background-color: #e6ffec; box-sizing: border-box; color: #0a3069; font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; font-size: 12px; white-space: pre;">(?:</span><span class="pl-kos" style="background-color: #e6ffec; box-sizing: border-box; color: #0a3069; font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; font-size: 12px; white-space: pre;">[</span><span style="background-color: #e6ffec; color: #0a3069; font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; font-size: 12px; white-space: pre;">a-zA-Z0-9</span><span class="pl-kos" style="background-color: #e6ffec; box-sizing: border-box; color: #0a3069; font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; font-size: 12px; white-space: pre;">]</span><span class="pl-kos" style="background-color: #e6ffec; box-sizing: border-box; color: #0a3069; font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; font-size: 12px; white-space: pre;">)</span><span class="pl-c1" style="background-color: #e6ffec; box-sizing: border-box; color: var(--color-prettylights-syntax-constant); font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; font-size: 12px; white-space: pre;">+</span><span class="pl-kos" style="background-color: #e6ffec; box-sizing: border-box; color: #0a3069; font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; font-size: 12px; white-space: pre;">)</span><span class="pl-c1" style="background-color: #e6ffec; box-sizing: border-box; color: var(--color-prettylights-syntax-constant); font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; font-size: 12px; white-space: pre;">+</span><span class="pl-cce" style="background-color: #e6ffec; box-sizing: border-box; color: #0a3069; font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; font-size: 12px; white-space: pre;">$</span><span class="pl-c1" style="background-color: #e6ffec; box-sizing: border-box; color: var(--color-prettylights-syntax-constant); font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; font-size: 12px; white-space: pre;">/</span></p><p>Happy coding!</p>Lizzy Mendivilhttp://www.blogger.com/profile/17037414623539252518noreply@blogger.com0tag:blogger.com,1999:blog-2681976894309771219.post-42833201874541061672021-10-18T11:57:00.000-04:002021-10-18T11:57:07.819-04:00 Using MySQL regular expressions in Rails ActiveRecord<p>Sometimes you want to filter the rows that not follow a given format.</p><p>For example, it was my case. I didn't get the rows that follow this format: [0-9]-wordhere</p><p>So, I did this:</p><p><span style="background-color: #fcff01;">my_result = MyModel.where("id = 1 AND (my_column NOT REGEXP ? AND my_column NOT REGEXP ?)", "[0-9]-wordone", "[0-9]-wordtwo")</span></p><p>This line will be transleted to:</p><p><span style="background-color: #fcff01;">SELECT * FROM my_table WHERE (id = 1 AND (my_column NOT REGEXP '[0-9]-wordone' AND my_column NOT REGEXP '[0-9]-wordtwo'))</span></p><p>Easy, right?</p><p>Happy coding :)</p><div><br /></div>Lizzy Mendivilhttp://www.blogger.com/profile/17037414623539252518noreply@blogger.com0tag:blogger.com,1999:blog-2681976894309771219.post-36141406259888899782021-04-01T00:39:00.001-04:002021-09-14T01:01:19.204-04:00Concerns, Interactors y Helpers en Ruby on Rails<p style="text-align: justify;"> Cuando nos referimos a estos 3 conceptos en Ruby on Rails, podemos decir que son los que vienen a resolver problemas de duplicación/repetición de código (Don'tRepeatYourself) o de mantener a nuestras clases con una única responsabilidad (Single Responsability).</p><p style="text-align: justify;"><span style="background-color: #fcff01;">Empecemos por los Helpers.</span></p><p style="text-align: justify;">son métodos que pueden ser usados por los VIEWS, entonces, pedazos de códigos reutilizables entre las views de tu proyecto. Cuando tienes código de vista que implementa cierta lógica y que además otras vistas también van a utilizar, puede ser buen candidato de extraerlo a un helper. Así no repites código en tu vista y además lo mantienes más limpio y legible.</p><p style="text-align: justify;"><span style="background-color: #fcff01;">Vamos por los Concerns.</span></p><p style="text-align: justify;">Son módulos que guardan código común reutilizable entre múltiples clases. Para que lleguen a ser concerns, se debe extender de ActiveSupport::Concern y la clase que quiera usar dicho concern debe hacer un Include NombreConcern</p><p style="text-align: justify;">Viven dentro de /app/models/concerns y /app/controllers/concerns</p><p style="text-align: justify;"><span style="background-color: #fcff01;">Interactors</span></p><p style="text-align: justify;">Los interactors puede ser una forma más de refactorizar el código de nuestros controllers, esos controllers llamados FAT controllers. Se dice que son FAT porque no están cumpliendo el principio de Single Responsability y están haciendo cosas que no deben hacer. Entonces todo ese código por demás lo extraemos y llevamos a un interactor. </p><p style="text-align: justify;">Un interactor para que sea interactor debe hacer un include Interactor, que viene de una gema interactor-rails y también debe tener un método de instancia público llamado call.</p><p style="text-align: justify;">El controlador que quiera usar dicho interactor, deberá poner NombreInteractor.call(enviar los parámetros correspondientes)</p><p style="text-align: justify;">Sì, demasiado básico. Hay mucho más envuelto en estos 3 conceptos. Solo es una introducción genérica. Consulta la documentación de RoR para más detalles.</p><p><br /></p>Lizzy Mendivilhttp://www.blogger.com/profile/17037414623539252518noreply@blogger.com0tag:blogger.com,1999:blog-2681976894309771219.post-44834995285076186712020-08-03T10:23:00.007-04:002020-08-03T10:24:14.135-04:00Obteniendo data desde un GraphQL Api con React<div>#React #ReactHooks #UseQuery #GraphQL</div><div><span style="background-color: #f9f9f9; color: #030303; font-family: Roboto, Arial, sans-serif; font-size: 14px; white-space: pre-wrap;">How to fetch GraphQL data in React</span></div><div><br /><div style="text-align: center;"><iframe allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" frameborder="0" height="315" src="https://www.youtube.com/embed/DM56vN9Y0r0" width="560"></iframe></div>
</div>Lizzy Mendivilhttp://www.blogger.com/profile/17037414623539252518noreply@blogger.com0tag:blogger.com,1999:blog-2681976894309771219.post-83925923253759834282020-07-31T16:24:00.002-04:002020-07-31T16:24:55.391-04:00Link target _blank - Security IssueLa etiqueta html "a" tiene un atributo "target" y enter sus valores que puede recibir está "_blank" que es el que nos permitirá abrir la página html en una nueva ventana de tu browser. Eso seguramente ya lo sabías así como yo. Pero hoy, trabajando en un enhacemente que reportó mi equipo de QA, aprendí algo nuevo.<div><br /></div><div>Que cuando estás ocupando el "_blank", por temas de seguridad necesitas poner rel="noopener noreferrer"</div><div><br /></div><div><span style="background-color: white; font-family: consolas, "courier new"; font-size: 15px;"><a href</span><span style="background-color: white; font-family: consolas, "courier new"; font-size: 15px;">="www.tupaginaaqui.com</span><span style="background-color: white; font-family: consolas, "courier new"; font-size: 15px;">"</span><span style="background-color: white; font-family: consolas, "courier new"; font-size: 15px;"> target="_blank</span><span style="background-color: white; font-family: consolas, "courier new"; font-size: 15px;">" </span>rel="noopener noreferrer"<span style="background-color: white; font-family: consolas, "courier new"; font-size: 15px;">></span></div><div><span style="background-color: white; font-family: consolas, "courier new"; font-size: 15px;"><br /></span></div><div><b>rel="noopener "</b> impide que la nueva página pueda acceder a la propiedad window.opener y asegura que se ejecuta en un proceso separado. Sin esto, la página de destino puede potencialmente redirigir su página a una URL maliciosa. </div><div><br /></div><b>
rel="noreferrer"</b> tiene el mismo efecto, pero también evita que el encabezado del Referido sea enviado a la nueva página. Eliminar el encabezado de referencia afectará al análisis.Lizzy Mendivilhttp://www.blogger.com/profile/17037414623539252518noreply@blogger.com0tag:blogger.com,1999:blog-2681976894309771219.post-47636751658552986712020-07-08T12:16:00.002-04:002020-07-08T12:16:44.907-04:00Cómo ver las base de datos de mongo que se crean automáticamenteSi estás buscando poder ver las base de datos de MongoDB que se van creando automáticamente en los proyectos que estás trabajando sin tener que crear las conexiones manualmente, lo que tienes que hacer es crear una conexión a la base de datos ADMIN. Deberás crear el usuario administrador.<div><br /></div><div>* Creando el usuario administrador</div><div><br /></div><div>Después de iniciar *mongod* y *mongo*, escribe lo siguiente en el shell:</div><div><br /></div><div>(los valores de user y pwd los escoges tú)</div><div><pre class="lang-js prettyprint prettyprinted" style="border-radius: 3px; border: 0px; box-sizing: inherit; color: #242729; font-family: consolas, menlo, monaco, "lucida console", "liberation mono", "dejavu sans mono", "bitstream vera sans mono", "courier new", monospace, sans-serif; font-size: 13px; font-stretch: inherit; font-variant-east-asian: inherit; font-variant-numeric: inherit; line-height: inherit; margin-bottom: 1em; margin-top: 0.5em; max-height: 600px; overflow-wrap: normal; overflow: auto; padding: 12px 8px; vertical-align: baseline; width: auto;"><code style="border: 0px; box-sizing: inherit; font-family: consolas, menlo, monaco, "lucida console", "liberation mono", "dejavu sans mono", "bitstream vera sans mono", "courier new", monospace, sans-serif; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline; white-space: inherit;"><span class="pln" style="border: 0px; box-sizing: inherit; color: var(--black-750); font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">use admin
db</span><span class="pun" style="border: 0px; box-sizing: inherit; color: var(--black-750); font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">.</span><span class="pln" style="border: 0px; box-sizing: inherit; color: var(--black-750); font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">createUser</span><span class="pun" style="border: 0px; box-sizing: inherit; color: var(--black-750); font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">(</span><span class="pln" style="border: 0px; box-sizing: inherit; color: var(--black-750); font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">
</span><span class="pun" style="border: 0px; box-sizing: inherit; color: var(--black-750); font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">{</span><span class="pln" style="border: 0px; box-sizing: inherit; color: var(--black-750); font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">
user</span><span class="pun" style="border: 0px; box-sizing: inherit; color: var(--black-750); font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">:</span><span class="pln" style="border: 0px; box-sizing: inherit; color: var(--black-750); font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"> </span><span class="str" style="border: 0px; box-sizing: inherit; color: var(--red-800); font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">"admin"</span><span class="pun" style="border: 0px; box-sizing: inherit; color: var(--black-750); font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">,</span><span class="pln" style="border: 0px; box-sizing: inherit; color: var(--black-750); font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">
pwd</span><span class="pun" style="border: 0px; box-sizing: inherit; color: var(--black-750); font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">:</span><span class="pln" style="border: 0px; box-sizing: inherit; color: var(--black-750); font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"> </span><span class="str" style="border: 0px; box-sizing: inherit; color: var(--red-800); font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">"admin123*"</span><span class="pun" style="border: 0px; box-sizing: inherit; color: var(--black-750); font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">,</span><span class="pln" style="border: 0px; box-sizing: inherit; color: var(--black-750); font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">
roles</span><span class="pun" style="border: 0px; box-sizing: inherit; color: var(--black-750); font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">:</span><span class="pln" style="border: 0px; box-sizing: inherit; color: var(--black-750); font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"> </span><span class="pun" style="border: 0px; box-sizing: inherit; color: var(--black-750); font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">[</span><span class="pln" style="border: 0px; box-sizing: inherit; color: var(--black-750); font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"> </span><span class="pun" style="border: 0px; box-sizing: inherit; color: var(--black-750); font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">{</span><span class="pln" style="border: 0px; box-sizing: inherit; color: var(--black-750); font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"> role</span><span class="pun" style="border: 0px; box-sizing: inherit; color: var(--black-750); font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">:</span><span class="pln" style="border: 0px; box-sizing: inherit; color: var(--black-750); font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"> </span><span class="str" style="border: 0px; box-sizing: inherit; color: var(--red-800); font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">"userAdminAnyDatabase"</span><span class="pun" style="border: 0px; box-sizing: inherit; color: var(--black-750); font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">,</span><span class="pln" style="border: 0px; box-sizing: inherit; color: var(--black-750); font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"> db</span><span class="pun" style="border: 0px; box-sizing: inherit; color: var(--black-750); font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">:</span><span class="pln" style="border: 0px; box-sizing: inherit; color: var(--black-750); font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"> </span><span class="str" style="border: 0px; box-sizing: inherit; color: var(--red-800); font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">"admin"</span><span class="pln" style="border: 0px; box-sizing: inherit; color: var(--black-750); font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"> </span><span class="pun" style="border: 0px; box-sizing: inherit; color: var(--black-750); font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">}</span><span class="pln" style="border: 0px; box-sizing: inherit; color: var(--black-750); font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"> </span><span class="pun" style="border: 0px; box-sizing: inherit; color: var(--black-750); font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">]</span><span class="pln" style="border: 0px; box-sizing: inherit; color: var(--black-750); font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">
</span><span class="pun" style="border: 0px; box-sizing: inherit; color: var(--black-750); font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">}</span><span class="pln" style="border: 0px; box-sizing: inherit; color: var(--black-750); font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">
</span><span class="pun" style="border: 0px; box-sizing: inherit; color: var(--black-750); font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">)</span></code></pre>Luego, reinicias el servicio y en la GUI que estés utilizando, deberás crear la conexión con las credenciales que acabamos de crear, en mi caso yo uso Robo 3T. </div><div>Como ves en la siguiente imagen, en el tab de Connection deberás agregarle un nombre y el address. Luego en el tab de Authentication, deberás ingresar las credenciales que acabamos de crear para la base de datos, digamos la principal, que se llama *admin*</div><div><br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiY0NoTFb0SyOhDbaW-pTsfybcdjsV-W3trurVCNXEMPV5IHym-oirdoIE2ixhm_rUl5W_V-YSFNxApmV1wxq8gKvXvlsJBNY5ATpBO9NylLm9M1RBFQfmTdKXcvXZQfqNFwBSy6chjjWU/s1371/mongodb-connections-admin.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="484" data-original-width="1371" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiY0NoTFb0SyOhDbaW-pTsfybcdjsV-W3trurVCNXEMPV5IHym-oirdoIE2ixhm_rUl5W_V-YSFNxApmV1wxq8gKvXvlsJBNY5ATpBO9NylLm9M1RBFQfmTdKXcvXZQfqNFwBSy6chjjWU/s320/mongodb-connections-admin.png" width="320" /></a></div><pre class="lang-js prettyprint prettyprinted" style="border-radius: 3px; border: 0px; box-sizing: inherit; color: #242729; font-family: consolas, menlo, monaco, "lucida console", "liberation mono", "dejavu sans mono", "bitstream vera sans mono", "courier new", monospace, sans-serif; font-size: 13px; font-stretch: inherit; font-variant-east-asian: inherit; font-variant-numeric: inherit; line-height: inherit; margin-bottom: 1em; margin-top: 0.5em; max-height: 600px; overflow-wrap: normal; overflow: auto; padding: 12px 8px; vertical-align: baseline; width: auto;"></pre><pre class="lang-js prettyprint prettyprinted" style="border-radius: 3px; border: 0px; box-sizing: inherit; color: #242729; font-family: consolas, menlo, monaco, "lucida console", "liberation mono", "dejavu sans mono", "bitstream vera sans mono", "courier new", monospace, sans-serif; font-size: 13px; font-stretch: inherit; font-variant-east-asian: inherit; font-variant-numeric: inherit; line-height: inherit; margin-bottom: 1em; margin-top: 0.5em; max-height: 600px; overflow-wrap: normal; overflow: auto; padding: 12px 8px; vertical-align: baseline; width: auto;"> </pre></div>
Luego te conectas, y verás dentro de ella todas las base de datos que se crearon. Y voilà!Lizzy Mendivilhttp://www.blogger.com/profile/17037414623539252518noreply@blogger.com0tag:blogger.com,1999:blog-2681976894309771219.post-71349206941440452592020-06-02T18:17:00.000-04:002020-06-02T18:17:12.554-04:00Node JS use import instead of require - Babel<div><span style="background-color: #f7cb4d;"><b>SyntaxError: Cannot use import statement outside a module</b></span></div><div><br /></div><div>Si te has topado con este error es porque seguramente en tu aplicación nodeJS estabas cambiando de algo como esto... a esto... Mira:</div><div><br /></div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjizk_GJVrlKQ7KUyGqdOChsr_fdWFbs-TsuLydhUwt-BUFtci01IAXHdRBrsPD-S0IfdeK5xf_07FO-vZImQvmGx2tj9nBasZJ4nnDJjWz5fnWQ8hvOEudQXsud6H0KZrF00XknfGIM-0/" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="592" data-original-width="940" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjizk_GJVrlKQ7KUyGqdOChsr_fdWFbs-TsuLydhUwt-BUFtci01IAXHdRBrsPD-S0IfdeK5xf_07FO-vZImQvmGx2tj9nBasZJ4nnDJjWz5fnWQ8hvOEudQXsud6H0KZrF00XknfGIM-0/s320/require-import-babel.png" width="320" /></a></div><div><br /></div><div><br /></div><div>El error se debe a que tu versión de NodeJS no soporta ES6 por eso es que debes instalar Babel para compilar y hacer que entienda el require, o sea, que transforme tu código.</div><div><br /></div><div>Y no solo require, ya que Babel funciona en base a plugins en el que le podemos decir qué cosas es que queremos que transforme.</div><div><br /></div><div><b><font size="4">Instala Babel así:</font></b></div><div><br /></div><div>npm install --save-dev @babel/core @babel/node @babel/preset-env</div><div><br /></div><div><b><font size="4">Configura Babel así:</font></b></div><div><br /></div><div>Y deberás crear un archivo llamado .babelrc y con la siguiente data adentro (pueden haber otras cosas):</div><div><br /></div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvlsxzi6pzN1-kJf8ZBPckp_T89fXkuxJGCFRNDn3I1eVVQiL3POIsufwQ1bdl4g1fjxxgLP_3Jdn2UYyOaXBUFEPlg2sSx9ra2pcUY9FAD9eXNvu_Ig2HRErrdGjupAcwM0vPhPbVJmc/" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="626" data-original-width="686" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvlsxzi6pzN1-kJf8ZBPckp_T89fXkuxJGCFRNDn3I1eVVQiL3POIsufwQ1bdl4g1fjxxgLP_3Jdn2UYyOaXBUFEPlg2sSx9ra2pcUY9FAD9eXNvu_Ig2HRErrdGjupAcwM0vPhPbVJmc/s320/node-babel-config.png" width="320" /></a></div><div><br /></div><div><b><font size="4">Ejecuta tu aplicación así:</font></b></div><div><br /></div><div>Instala nodemon</div><div><br /></div><div><span class="token plain" style="background-color: #011627; color: #d6deeb; font-family: monospace; font-size: 16px; letter-spacing: -0.048px; white-space: pre;">npm install nodemon </span><span class="token operator" style="background-color: #011627; color: #7fdbca; font-family: monospace; font-size: 16px; letter-spacing: -0.048px; white-space: pre;">--</span><span class="token plain" style="background-color: #011627; color: #d6deeb; font-family: monospace; font-size: 16px; letter-spacing: -0.048px; white-space: pre;">save</span><span class="token operator" style="background-color: #011627; color: #7fdbca; font-family: monospace; font-size: 16px; letter-spacing: -0.048px; white-space: pre;">-</span><span class="token plain" style="background-color: #011627; color: #d6deeb; font-family: monospace; font-size: 16px; letter-spacing: -0.048px; white-space: pre;">dev</span></div><div><span class="token plain" style="background-color: #011627; color: #d6deeb; font-family: monospace; font-size: 16px; letter-spacing: -0.048px; white-space: pre;"><br /></span></div><div>Crea el siguiente script dentro de tu package.json</div><div><br /></div><div><div style="background-color: #292d3e; color: #bfc7d5; font-family: Consolas, "Courier New", monospace; font-size: 14px; line-height: 19px; white-space: pre;"><span style="color: #c3e88d;">"start"</span>: <span style="color: #d9f5dd;">"</span><span style="color: #80cbc4;">nodemon --exec babel-node index.js</span><span style="color: #d9f5dd;">"</span></div></div><div><br /></div><div><br /></div><div>Y voilà. </div><div><br /></div><div>Happy coding :)</div><div><br /></div>Lizzy Mendivilhttp://www.blogger.com/profile/17037414623539252518noreply@blogger.com1tag:blogger.com,1999:blog-2681976894309771219.post-71810358355213229732020-05-26T20:00:00.002-04:002020-05-26T20:01:41.626-04:00SASS / SCSS vs LESS <div><font size="4"><b>¿Qué es un pre-procesador CSS?</b></font></div><div><br /></div><div>Es un programa que escribe CSS por ti basado en el código que tú escribiste a través de ese pre-procesador. Cuando usas un pre-procesador, puedes hacer cosas que no son posibles con CSS nativo como por ejemplo el uso de herencia, mix-ins, etc., haciendo un código más útil, productivo y mantenible.</div><div><br /></div><div>Hay muchos pre-procesadores disponibles, sin embargo, en este apartado hablaré de dos de ellos: SASS y LESS.</div><div> </div><div><font size="4"><b>¿Qué es SASS?</b></font></div><div><br /></div><div>Por sus siglas en inglés, Syntactically Awesome Style Sheets. Es el pre-procesador CSS más popular y el más antiguo (2006). Tiene una comunidad grande y muchos recursos disponibles en la Web para beginners. </div><div><br /></div><div>Podemos utilizar SASS mediante dos sintaxis: Sass o SCSS.</div><div><br /></div><div><b><u>SASS</u></b></div><div>Su extensión es .sass </div><div>Está basado en indentación</div><div>Es un poco difícil de leer</div><div>El signo de asginación es =</div><div><br /></div><div><b><u>SCSS</u></b></div><div>Su extensión es .scss</div><div>Utiliza llaves y puntos y comas</div><div>Es fácil de entender y se parece a CSS</div><div>El signo de asginación es :</div><div><br /></div><div>Sin embargo, es bueno saber que todo los features están disponibles para ambas sintaxis.</div><div><br /></div><div>Boostrap 4, un framework de CSS muy popular, está escrito en SASS. Lo curioso es que su anterior versión usaba LESS, y desde que empezó a utilizar SASS, su popularidad subió.</div><div><br /></div><div><b><font size="4">¿Qué es LESS?</font></b></div><div><b><font size="4"><br /></font></b></div><div>Por sus siglas en inglés, Leaner Stylesheets. Fue lanzado en 2009, está escrito en JavaScript. Es el competidor más fuerte de SASS. A diferencia de SASS, LESS utiliza @ para declarar variables lo cual puede causar confusión con @media y @keyframes, pero una de sus ventajas fuertes es su facilidad de adicionarlo a un proyecto, puede ser con NPM o Less.js</div><div><br /></div><div>Bajo la pequeña comparativa que se hizo líneas arriba...</div><div><br /></div><div><b style="background-color: #f7cb4d;">¿Por qué elegir SCSS sobre SASS?</b></div><div><br /></div><div>-Legibilidad. La sintaxis es muy parecida a CSS</div><div>-Curva de aprendizaje. Solo se agrega algunos features extras con respecto a CSS</div><div>-Compatibilidad. Un archivo .css es archivo .scss válido</div><div>-Recursos: Existen muchos artículos colgados en la red y algunas librerías open source</div><div>-Expansibilidad: es fácil pasar de SCSS a SASS</div><div><br /></div><div><b style="background-color: #f7cb4d;">¿Qué podemos hacer con SASS/LESS que con Vanilla CSS no podemos?</b></div><div><br /></div><div><b>1. Variables. </b>Podemos guardar iNformación dentro de variables y utilizarla en nuestra hoja de estilo. Vanilla CSS usa variables pero con SASS/SCSS puedes iterar tu variables utilizando for-loop</div><div><br /></div><div>SASS</div><div>En sass se define una variable con el signo $</div><div><br /></div><div>@color: "#FF0000";</div><div><br /></div><div>LESS </div><div>En less se define una variable con el signo @</div><div><br /></div><div>$color: "#FF0000";</div><div><br /></div><div><b>2. Anidamiento. </b>¿Recuerdas el anidamiento en HTML? La indentación en Sass permite replicar cómo se anidan los elementos HTML. Es buena práctica para evitar escribir selectors repetitivamente.</div><div><br /></div><div>SASS/LESS</div><div><br /></div><div><table border="0" cellpadding="0" cellspacing="0" style="background-attachment: initial !important; background-clip: initial !important; background-image: initial !important; background-origin: initial !important; background-position: 0px 0px; background-repeat: initial !important; background-size: initial !important; border-collapse: collapse; border-radius: 0px; border-spacing: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: #333333; font-family: "Lucida Sans Typewriter", "Lucida Console", monaco, "Bitstream Vera Sans Mono", monospace !important; font-size: 14px; font-variant-ligatures: common-ligatures; height: auto; left: auto; line-height: 1.42em; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; table-layout: fixed; text-shadow: none; top: auto; vertical-align: baseline; width: auto; word-break: normal;"><tbody style="background-attachment: initial !important; background-clip: initial !important; background-image: initial !important; background-origin: initial !important; background-position: 0px 0px; background-repeat: initial !important; background-size: initial !important; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; height: auto; left: auto; line-height: 1.42em; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; text-shadow: none; top: auto; vertical-align: baseline; width: auto; word-break: normal;"><tr style="background-attachment: initial !important; background-clip: initial !important; background-image: initial !important; background-origin: initial !important; background-position: 0px 0px; background-repeat: initial !important; background-size: initial !important; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; height: auto; left: auto; line-height: 1.42em; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; text-shadow: none; top: auto; vertical-align: baseline; width: auto; word-break: normal;"><td class="gutter" style="background-attachment: initial !important; background-clip: initial !important; background-color: #f8f8f8; background-image: initial !important; background-origin: initial !important; background-position: 0px 0px; background-repeat: initial !important; background-size: initial !important; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: #d2d2d2; float: none; height: auto; left: auto; line-height: 1.42em; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; text-shadow: none; top: auto; vertical-align: baseline; width: auto; word-break: normal;"><div class="line number1 index0 alt2" style="background: 0px 0px rgb(255, 255, 255); border-bottom-color: initial !important; border-bottom-style: initial !important; border-image: initial !important; border-left-color: initial !important; border-left-style: initial !important; border-radius: 0px; border-right-color: rgb(191, 202, 218); border-right-style: solid; border-top-color: initial !important; border-top-style: initial !important; border-width: 0px 3px 0px 0px; bottom: auto; box-sizing: content-box; color: #333333; float: none; height: auto; left: auto; line-height: 1.42em; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 0.25em 0.5em 0.25em 1em; position: static; right: auto; text-align: right; text-shadow: none; top: auto; vertical-align: baseline; white-space: pre; width: auto; word-break: normal;">1</div><div class="line number2 index1 alt1" style="background: 0px 0px rgb(249, 249, 249); border-bottom-color: initial !important; border-bottom-style: initial !important; border-image: initial !important; border-left-color: initial !important; border-left-style: initial !important; border-radius: 0px; border-right-color: rgb(191, 202, 218); border-right-style: solid; border-top-color: initial !important; border-top-style: initial !important; border-width: 0px 3px 0px 0px; bottom: auto; box-sizing: content-box; color: #333333; float: none; height: auto; left: auto; line-height: 1.42em; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 0.25em 0.5em 0.25em 1em; position: static; right: auto; text-align: right; text-shadow: none; top: auto; vertical-align: baseline; white-space: pre; width: auto; word-break: normal;">2</div><div class="line number3 index2 alt2" style="background: 0px 0px rgb(255, 255, 255); border-bottom-color: initial !important; border-bottom-style: initial !important; border-image: initial !important; border-left-color: initial !important; border-left-style: initial !important; border-radius: 0px; border-right-color: rgb(191, 202, 218); border-right-style: solid; border-top-color: initial !important; border-top-style: initial !important; border-width: 0px 3px 0px 0px; bottom: auto; box-sizing: content-box; color: #333333; float: none; height: auto; left: auto; line-height: 1.42em; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 0.25em 0.5em 0.25em 1em; position: static; right: auto; text-align: right; text-shadow: none; top: auto; vertical-align: baseline; white-space: pre; width: auto; word-break: normal;">3</div><div class="line number4 index3 alt1" style="background: 0px 0px rgb(249, 249, 249); border-bottom-color: initial !important; border-bottom-style: initial !important; border-image: initial !important; border-left-color: initial !important; border-left-style: initial !important; border-radius: 0px; border-right-color: rgb(191, 202, 218); border-right-style: solid; border-top-color: initial !important; border-top-style: initial !important; border-width: 0px 3px 0px 0px; bottom: auto; box-sizing: content-box; color: #333333; float: none; height: auto; left: auto; line-height: 1.42em; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 0.25em 0.5em 0.25em 1em; position: static; right: auto; text-align: right; text-shadow: none; top: auto; vertical-align: baseline; white-space: pre; width: auto; word-break: normal;">4</div><div class="line number5 index4 alt2" style="background: 0px 0px rgb(255, 255, 255); border-bottom-color: initial !important; border-bottom-style: initial !important; border-image: initial !important; border-left-color: initial !important; border-left-style: initial !important; border-radius: 0px; border-right-color: rgb(191, 202, 218); border-right-style: solid; border-top-color: initial !important; border-top-style: initial !important; border-width: 0px 3px 0px 0px; bottom: auto; box-sizing: content-box; color: #333333; float: none; height: auto; left: auto; line-height: 1.42em; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 0.25em 0.5em 0.25em 1em; position: static; right: auto; text-align: right; text-shadow: none; top: auto; vertical-align: baseline; white-space: pre; width: auto; word-break: normal;">5</div><div class="line number6 index5 alt1" style="background: 0px 0px rgb(249, 249, 249); border-bottom-color: initial !important; border-bottom-style: initial !important; border-image: initial !important; border-left-color: initial !important; border-left-style: initial !important; border-radius: 0px; border-right-color: rgb(191, 202, 218); border-right-style: solid; border-top-color: initial !important; border-top-style: initial !important; border-width: 0px 3px 0px 0px; bottom: auto; box-sizing: content-box; color: #333333; float: none; height: auto; left: auto; line-height: 1.42em; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 0.25em 0.5em 0.25em 1em; position: static; right: auto; text-align: right; text-shadow: none; top: auto; vertical-align: baseline; white-space: pre; width: auto; word-break: normal;">6</div><div class="line number7 index6 alt2" style="background: 0px 0px rgb(255, 255, 255); border-bottom-color: initial !important; border-bottom-style: initial !important; border-image: initial !important; border-left-color: initial !important; border-left-style: initial !important; border-radius: 0px; border-right-color: rgb(191, 202, 218); border-right-style: solid; border-top-color: initial !important; border-top-style: initial !important; border-width: 0px 3px 0px 0px; bottom: auto; box-sizing: content-box; color: #333333; float: none; height: auto; left: auto; line-height: 1.42em; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 0.25em 0.5em 0.25em 1em; position: static; right: auto; text-align: right; text-shadow: none; top: auto; vertical-align: baseline; white-space: pre; width: auto; word-break: normal;">7</div><div class="line number8 index7 alt1" style="background: 0px 0px rgb(249, 249, 249); border-bottom-color: initial !important; border-bottom-style: initial !important; border-image: initial !important; border-left-color: initial !important; border-left-style: initial !important; border-radius: 0px; border-right-color: rgb(191, 202, 218); border-right-style: solid; border-top-color: initial !important; border-top-style: initial !important; border-width: 0px 3px 0px 0px; bottom: auto; box-sizing: content-box; color: #333333; float: none; height: auto; left: auto; line-height: 1.42em; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 0.25em 0.5em 0.25em 1em; position: static; right: auto; text-align: right; text-shadow: none; top: auto; vertical-align: baseline; white-space: pre; width: auto; word-break: normal;">8</div><div class="line number9 index8 alt2" style="background: 0px 0px rgb(255, 255, 255); border-bottom-color: initial !important; border-bottom-style: initial !important; border-image: initial !important; border-left-color: initial !important; border-left-style: initial !important; border-radius: 0px; border-right-color: rgb(191, 202, 218); border-right-style: solid; border-top-color: initial !important; border-top-style: initial !important; border-width: 0px 3px 0px 0px; bottom: auto; box-sizing: content-box; color: #333333; float: none; height: auto; left: auto; line-height: 1.42em; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 0.25em 0.5em 0.25em 1em; position: static; right: auto; text-align: right; text-shadow: none; top: auto; vertical-align: baseline; white-space: pre; width: auto; word-break: normal;">9</div></td><td class="code" style="background-attachment: initial !important; background-clip: initial !important; background-color: #f8f8f8; background-image: initial !important; background-origin: initial !important; background-position: 0px 0px; background-repeat: initial !important; background-size: initial !important; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; height: auto; left: auto; line-height: 1.42em; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; text-shadow: none; top: auto; vertical-align: top; width: 617.2px; word-break: normal;"><div class="container" style="background: 0px 0px; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; height: auto; left: auto; line-height: 1.42em; margin: 0px; max-width: 117rem; min-height: auto; outline: 0px; overflow: visible; padding: 0px; position: relative; right: auto; text-shadow: none; top: auto; vertical-align: baseline; width: auto; word-break: normal;"><div class="line number1 index0 alt2" style="background: 0px 0px rgb(255, 255, 255); border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; height: auto; left: auto; line-height: 1.42em; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 0.25em 1em; position: static; right: auto; text-shadow: none; top: auto; vertical-align: baseline; white-space: pre; width: auto; word-break: normal;"><code class="css plain" style="background: 0px 0px; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: black; float: none; font-family: "Lucida Sans Typewriter", "Lucida Console", monaco, "Bitstream Vera Sans Mono", monospace !important; height: auto; left: auto; line-height: 1.42em; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; text-shadow: none; top: auto; vertical-align: baseline; width: auto; word-break: normal;">nav {</code></div><div class="line number2 index1 alt1" style="background: 0px 0px rgb(249, 249, 249); border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; height: auto; left: auto; line-height: 1.42em; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 0.25em 1em; position: static; right: auto; text-shadow: none; top: auto; vertical-align: baseline; white-space: pre; width: auto; word-break: normal;"><code class="css spaces" style="background: 0px 0px; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: "Lucida Sans Typewriter", "Lucida Console", monaco, "Bitstream Vera Sans Mono", monospace !important; height: auto; left: auto; line-height: 1.42em; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; text-shadow: none; top: auto; vertical-align: baseline; width: auto; word-break: normal;"> </code><code class="css keyword" style="background: 0px 0px; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: #006699; float: none; font-family: "Lucida Sans Typewriter", "Lucida Console", monaco, "Bitstream Vera Sans Mono", monospace !important; font-weight: 700; height: auto; left: auto; line-height: 1.42em; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; text-shadow: none; top: auto; vertical-align: baseline; width: auto; word-break: normal;">margin</code><code class="css plain" style="background: 0px 0px; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: black; float: none; font-family: "Lucida Sans Typewriter", "Lucida Console", monaco, "Bitstream Vera Sans Mono", monospace !important; height: auto; left: auto; line-height: 1.42em; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; text-shadow: none; top: auto; vertical-align: baseline; width: auto; word-break: normal;">: </code><code class="css value" style="background: 0px 0px; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: #009900; float: none; font-family: "Lucida Sans Typewriter", "Lucida Console", monaco, "Bitstream Vera Sans Mono", monospace !important; height: auto; left: auto; line-height: 1.42em; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; text-shadow: none; top: auto; vertical-align: baseline; width: auto; word-break: normal;">50px</code> <code class="css value" style="background: 0px 0px; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: #009900; float: none; font-family: "Lucida Sans Typewriter", "Lucida Console", monaco, "Bitstream Vera Sans Mono", monospace !important; height: auto; left: auto; line-height: 1.42em; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; text-shadow: none; top: auto; vertical-align: baseline; width: auto; word-break: normal;">auto</code> <code class="css value" style="background: 0px 0px; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: #009900; float: none; font-family: "Lucida Sans Typewriter", "Lucida Console", monaco, "Bitstream Vera Sans Mono", monospace !important; height: auto; left: auto; line-height: 1.42em; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; text-shadow: none; top: auto; vertical-align: baseline; width: auto; word-break: normal;">0</code><code class="css plain" style="background: 0px 0px; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: black; float: none; font-family: "Lucida Sans Typewriter", "Lucida Console", monaco, "Bitstream Vera Sans Mono", monospace !important; height: auto; left: auto; line-height: 1.42em; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; text-shadow: none; top: auto; vertical-align: baseline; width: auto; word-break: normal;">;</code></div><div class="line number3 index2 alt2" style="background: 0px 0px rgb(255, 255, 255); border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; height: auto; left: auto; line-height: 1.42em; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 0.25em 1em; position: static; right: auto; text-shadow: none; top: auto; vertical-align: baseline; white-space: pre; width: auto; word-break: normal;"><code class="css spaces" style="background: 0px 0px; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: "Lucida Sans Typewriter", "Lucida Console", monaco, "Bitstream Vera Sans Mono", monospace !important; height: auto; left: auto; line-height: 1.42em; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; text-shadow: none; top: auto; vertical-align: baseline; width: auto; word-break: normal;"> </code><code class="css keyword" style="background: 0px 0px; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: #006699; float: none; font-family: "Lucida Sans Typewriter", "Lucida Console", monaco, "Bitstream Vera Sans Mono", monospace !important; font-weight: 700; height: auto; left: auto; line-height: 1.42em; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; text-shadow: none; top: auto; vertical-align: baseline; width: auto; word-break: normal;">width</code><code class="css plain" style="background: 0px 0px; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: black; float: none; font-family: "Lucida Sans Typewriter", "Lucida Console", monaco, "Bitstream Vera Sans Mono", monospace !important; height: auto; left: auto; line-height: 1.42em; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; text-shadow: none; top: auto; vertical-align: baseline; width: auto; word-break: normal;">: </code><code class="css value" style="background: 0px 0px; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: #009900; float: none; font-family: "Lucida Sans Typewriter", "Lucida Console", monaco, "Bitstream Vera Sans Mono", monospace !important; height: auto; left: auto; line-height: 1.42em; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; text-shadow: none; top: auto; vertical-align: baseline; width: auto; word-break: normal;">788px</code><code class="css plain" style="background: 0px 0px; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: black; float: none; font-family: "Lucida Sans Typewriter", "Lucida Console", monaco, "Bitstream Vera Sans Mono", monospace !important; height: auto; left: auto; line-height: 1.42em; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; text-shadow: none; top: auto; vertical-align: baseline; width: auto; word-break: normal;">;</code></div><div class="line number4 index3 alt1" style="background: 0px 0px rgb(249, 249, 249); border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; height: auto; left: auto; line-height: 1.42em; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 0.25em 1em; position: static; right: auto; text-shadow: none; top: auto; vertical-align: baseline; white-space: pre; width: auto; word-break: normal;"><code class="css spaces" style="background: 0px 0px; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: "Lucida Sans Typewriter", "Lucida Console", monaco, "Bitstream Vera Sans Mono", monospace !important; height: auto; left: auto; line-height: 1.42em; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; text-shadow: none; top: auto; vertical-align: baseline; width: auto; word-break: normal;"> </code><code class="css keyword" style="background: 0px 0px; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: #006699; float: none; font-family: "Lucida Sans Typewriter", "Lucida Console", monaco, "Bitstream Vera Sans Mono", monospace !important; font-weight: 700; height: auto; left: auto; line-height: 1.42em; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; text-shadow: none; top: auto; vertical-align: baseline; width: auto; word-break: normal;">height</code><code class="css plain" style="background: 0px 0px; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: black; float: none; font-family: "Lucida Sans Typewriter", "Lucida Console", monaco, "Bitstream Vera Sans Mono", monospace !important; height: auto; left: auto; line-height: 1.42em; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; text-shadow: none; top: auto; vertical-align: baseline; width: auto; word-break: normal;">: </code><code class="css value" style="background: 0px 0px; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: #009900; float: none; font-family: "Lucida Sans Typewriter", "Lucida Console", monaco, "Bitstream Vera Sans Mono", monospace !important; height: auto; left: auto; line-height: 1.42em; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; text-shadow: none; top: auto; vertical-align: baseline; width: auto; word-break: normal;">45px</code><code class="css plain" style="background: 0px 0px; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: black; float: none; font-family: "Lucida Sans Typewriter", "Lucida Console", monaco, "Bitstream Vera Sans Mono", monospace !important; height: auto; left: auto; line-height: 1.42em; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; text-shadow: none; top: auto; vertical-align: baseline; width: auto; word-break: normal;">;</code></div><div class="line number5 index4 alt2" style="background: 0px 0px rgb(255, 255, 255); border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; height: auto; left: auto; line-height: 1.42em; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 0.25em 1em; position: static; right: auto; text-shadow: none; top: auto; vertical-align: baseline; white-space: pre; width: auto; word-break: normal;"><code class="css spaces" style="background: 0px 0px; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: "Lucida Sans Typewriter", "Lucida Console", monaco, "Bitstream Vera Sans Mono", monospace !important; height: auto; left: auto; line-height: 1.42em; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; text-shadow: none; top: auto; vertical-align: baseline; width: auto; word-break: normal;"> </code><code class="css plain" style="background: 0px 0px; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: black; float: none; font-family: "Lucida Sans Typewriter", "Lucida Console", monaco, "Bitstream Vera Sans Mono", monospace !important; height: auto; left: auto; line-height: 1.42em; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; text-shadow: none; top: auto; vertical-align: baseline; width: auto; word-break: normal;">ul {</code></div><div class="line number6 index5 alt1" style="background: 0px 0px rgb(249, 249, 249); border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; height: auto; left: auto; line-height: 1.42em; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 0.25em 1em; position: static; right: auto; text-shadow: none; top: auto; vertical-align: baseline; white-space: pre; width: auto; word-break: normal;"><code class="css spaces" style="background: 0px 0px; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: "Lucida Sans Typewriter", "Lucida Console", monaco, "Bitstream Vera Sans Mono", monospace !important; height: auto; left: auto; line-height: 1.42em; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; text-shadow: none; top: auto; vertical-align: baseline; width: auto; word-break: normal;"> </code><code class="css keyword" style="background: 0px 0px; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: #006699; float: none; font-family: "Lucida Sans Typewriter", "Lucida Console", monaco, "Bitstream Vera Sans Mono", monospace !important; font-weight: 700; height: auto; left: auto; line-height: 1.42em; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; text-shadow: none; top: auto; vertical-align: baseline; width: auto; word-break: normal;">padding</code><code class="css plain" style="background: 0px 0px; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: black; float: none; font-family: "Lucida Sans Typewriter", "Lucida Console", monaco, "Bitstream Vera Sans Mono", monospace !important; height: auto; left: auto; line-height: 1.42em; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; text-shadow: none; top: auto; vertical-align: baseline; width: auto; word-break: normal;">: </code><code class="css value" style="background: 0px 0px; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: #009900; float: none; font-family: "Lucida Sans Typewriter", "Lucida Console", monaco, "Bitstream Vera Sans Mono", monospace !important; height: auto; left: auto; line-height: 1.42em; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; text-shadow: none; top: auto; vertical-align: baseline; width: auto; word-break: normal;">0</code><code class="css plain" style="background: 0px 0px; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: black; float: none; font-family: "Lucida Sans Typewriter", "Lucida Console", monaco, "Bitstream Vera Sans Mono", monospace !important; height: auto; left: auto; line-height: 1.42em; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; text-shadow: none; top: auto; vertical-align: baseline; width: auto; word-break: normal;">;</code></div><div class="line number7 index6 alt2" style="background: 0px 0px rgb(255, 255, 255); border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; height: auto; left: auto; line-height: 1.42em; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 0.25em 1em; position: static; right: auto; text-shadow: none; top: auto; vertical-align: baseline; white-space: pre; width: auto; word-break: normal;"><code class="css spaces" style="background: 0px 0px; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: "Lucida Sans Typewriter", "Lucida Console", monaco, "Bitstream Vera Sans Mono", monospace !important; height: auto; left: auto; line-height: 1.42em; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; text-shadow: none; top: auto; vertical-align: baseline; width: auto; word-break: normal;"> </code><code class="css keyword" style="background: 0px 0px; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: #006699; float: none; font-family: "Lucida Sans Typewriter", "Lucida Console", monaco, "Bitstream Vera Sans Mono", monospace !important; font-weight: 700; height: auto; left: auto; line-height: 1.42em; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; text-shadow: none; top: auto; vertical-align: baseline; width: auto; word-break: normal;">margin</code><code class="css plain" style="background: 0px 0px; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: black; float: none; font-family: "Lucida Sans Typewriter", "Lucida Console", monaco, "Bitstream Vera Sans Mono", monospace !important; height: auto; left: auto; line-height: 1.42em; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; text-shadow: none; top: auto; vertical-align: baseline; width: auto; word-break: normal;">: </code><code class="css value" style="background: 0px 0px; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: #009900; float: none; font-family: "Lucida Sans Typewriter", "Lucida Console", monaco, "Bitstream Vera Sans Mono", monospace !important; height: auto; left: auto; line-height: 1.42em; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; text-shadow: none; top: auto; vertical-align: baseline; width: auto; word-break: normal;">0</code><code class="css plain" style="background: 0px 0px; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: black; float: none; font-family: "Lucida Sans Typewriter", "Lucida Console", monaco, "Bitstream Vera Sans Mono", monospace !important; height: auto; left: auto; line-height: 1.42em; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; text-shadow: none; top: auto; vertical-align: baseline; width: auto; word-break: normal;">;</code></div><div class="line number8 index7 alt1" style="background: 0px 0px rgb(249, 249, 249); border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; height: auto; left: auto; line-height: 1.42em; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 0.25em 1em; position: static; right: auto; text-shadow: none; top: auto; vertical-align: baseline; white-space: pre; width: auto; word-break: normal;"><code class="css spaces" style="background: 0px 0px; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: "Lucida Sans Typewriter", "Lucida Console", monaco, "Bitstream Vera Sans Mono", monospace !important; height: auto; left: auto; line-height: 1.42em; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; text-shadow: none; top: auto; vertical-align: baseline; width: auto; word-break: normal;"> </code><code class="css plain" style="background: 0px 0px; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: black; float: none; font-family: "Lucida Sans Typewriter", "Lucida Console", monaco, "Bitstream Vera Sans Mono", monospace !important; height: auto; left: auto; line-height: 1.42em; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; text-shadow: none; top: auto; vertical-align: baseline; width: auto; word-break: normal;">}</code></div><div class="line number9 index8 alt2" style="background: 0px 0px rgb(255, 255, 255); border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; height: auto; left: auto; line-height: 1.42em; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 0.25em 1em; position: static; right: auto; text-shadow: none; top: auto; vertical-align: baseline; white-space: pre; width: auto; word-break: normal;"><code class="css plain" style="background: 0px 0px; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: black; float: none; font-family: "Lucida Sans Typewriter", "Lucida Console", monaco, "Bitstream Vera Sans Mono", monospace !important; height: auto; left: auto; line-height: 1.42em; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; text-shadow: none; top: auto; vertical-align: baseline; width: auto; word-break: normal;">}</code></div></div></td></tr></tbody></table></div><div><br /></div><div><br /></div><div><br /></div><div><b>3. Mixins. </b>Son funciones que se pueden incluir en cualquier parte de la hoja de estilo.</div><div><br /></div><div>SASS</div><div>Utilizamos @mixin</div><div><br /></div><div><br /></div><div><table border="0" cellpadding="0" cellspacing="0" style="background-attachment: initial !important; background-clip: initial !important; background-image: initial !important; background-origin: initial !important; background-position: 0px 0px; background-repeat: initial !important; background-size: initial !important; border-collapse: collapse; border-radius: 0px; border-spacing: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: #333333; font-family: "Lucida Sans Typewriter", "Lucida Console", monaco, "Bitstream Vera Sans Mono", monospace !important; font-size: 14px; font-variant-ligatures: common-ligatures; height: auto; left: auto; line-height: 1.42em; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; table-layout: fixed; text-shadow: none; top: auto; vertical-align: baseline; width: auto; word-break: normal;"><tbody style="background-attachment: initial !important; background-clip: initial !important; background-image: initial !important; background-origin: initial !important; background-position: 0px 0px; background-repeat: initial !important; background-size: initial !important; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; height: auto; left: auto; line-height: 1.42em; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; text-shadow: none; top: auto; vertical-align: baseline; width: auto; word-break: normal;"><tr style="background-attachment: initial !important; background-clip: initial !important; background-image: initial !important; background-origin: initial !important; background-position: 0px 0px; background-repeat: initial !important; background-size: initial !important; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; height: auto; left: auto; line-height: 1.42em; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; text-shadow: none; top: auto; vertical-align: baseline; width: auto; word-break: normal;"><td class="gutter" style="background-attachment: initial !important; background-clip: initial !important; background-color: #f8f8f8; background-image: initial !important; background-origin: initial !important; background-position: 0px 0px; background-repeat: initial !important; background-size: initial !important; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: #d2d2d2; float: none; height: auto; left: auto; line-height: 1.42em; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; text-shadow: none; top: auto; vertical-align: baseline; width: auto; word-break: normal;"><div class="line number2 index1 alt1" style="background: 0px 0px rgb(249, 249, 249); border-bottom-color: initial !important; border-bottom-style: initial !important; border-image: initial !important; border-left-color: initial !important; border-left-style: initial !important; border-radius: 0px; border-right-color: rgb(191, 202, 218); border-right-style: solid; border-top-color: initial !important; border-top-style: initial !important; border-width: 0px 3px 0px 0px; bottom: auto; box-sizing: content-box; color: #333333; float: none; height: auto; left: auto; line-height: 1.42em; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 0.25em 0.5em 0.25em 1em; position: static; right: auto; text-align: right; text-shadow: none; top: auto; vertical-align: baseline; white-space: pre; width: auto; word-break: normal;">2</div><div class="line number3 index2 alt2" style="background: 0px 0px rgb(255, 255, 255); border-bottom-color: initial !important; border-bottom-style: initial !important; border-image: initial !important; border-left-color: initial !important; border-left-style: initial !important; border-radius: 0px; border-right-color: rgb(191, 202, 218); border-right-style: solid; border-top-color: initial !important; border-top-style: initial !important; border-width: 0px 3px 0px 0px; bottom: auto; box-sizing: content-box; color: #333333; float: none; height: auto; left: auto; line-height: 1.42em; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 0.25em 0.5em 0.25em 1em; position: static; right: auto; text-align: right; text-shadow: none; top: auto; vertical-align: baseline; white-space: pre; width: auto; word-break: normal;">3</div><div class="line number4 index3 alt1" style="background: 0px 0px rgb(249, 249, 249); border-bottom-color: initial !important; border-bottom-style: initial !important; border-image: initial !important; border-left-color: initial !important; border-left-style: initial !important; border-radius: 0px; border-right-color: rgb(191, 202, 218); border-right-style: solid; border-top-color: initial !important; border-top-style: initial !important; border-width: 0px 3px 0px 0px; bottom: auto; box-sizing: content-box; color: #333333; float: none; height: auto; left: auto; line-height: 1.42em; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 0.25em 0.5em 0.25em 1em; position: static; right: auto; text-align: right; text-shadow: none; top: auto; vertical-align: baseline; white-space: pre; width: auto; word-break: normal;">4</div><div class="line number5 index4 alt2" style="background: 0px 0px rgb(255, 255, 255); border-bottom-color: initial !important; border-bottom-style: initial !important; border-image: initial !important; border-left-color: initial !important; border-left-style: initial !important; border-radius: 0px; border-right-color: rgb(191, 202, 218); border-right-style: solid; border-top-color: initial !important; border-top-style: initial !important; border-width: 0px 3px 0px 0px; bottom: auto; box-sizing: content-box; color: #333333; float: none; height: auto; left: auto; line-height: 1.42em; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 0.25em 0.5em 0.25em 1em; position: static; right: auto; text-align: right; text-shadow: none; top: auto; vertical-align: baseline; white-space: pre; width: auto; word-break: normal;">5</div><div class="line number6 index5 alt1" style="background: 0px 0px rgb(249, 249, 249); border-bottom-color: initial !important; border-bottom-style: initial !important; border-image: initial !important; border-left-color: initial !important; border-left-style: initial !important; border-radius: 0px; border-right-color: rgb(191, 202, 218); border-right-style: solid; border-top-color: initial !important; border-top-style: initial !important; border-width: 0px 3px 0px 0px; bottom: auto; box-sizing: content-box; color: #333333; float: none; height: auto; left: auto; line-height: 1.42em; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 0.25em 0.5em 0.25em 1em; position: static; right: auto; text-align: right; text-shadow: none; top: auto; vertical-align: baseline; white-space: pre; width: auto; word-break: normal;">6</div><div class="line number7 index6 alt2" style="background: 0px 0px rgb(255, 255, 255); border-bottom-color: initial !important; border-bottom-style: initial !important; border-image: initial !important; border-left-color: initial !important; border-left-style: initial !important; border-radius: 0px; border-right-color: rgb(191, 202, 218); border-right-style: solid; border-top-color: initial !important; border-top-style: initial !important; border-width: 0px 3px 0px 0px; bottom: auto; box-sizing: content-box; color: #333333; float: none; height: auto; left: auto; line-height: 1.42em; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 0.25em 0.5em 0.25em 1em; position: static; right: auto; text-align: right; text-shadow: none; top: auto; vertical-align: baseline; white-space: pre; width: auto; word-break: normal;">7</div><div class="line number8 index7 alt1" style="background: 0px 0px rgb(249, 249, 249); border-bottom-color: initial !important; border-bottom-style: initial !important; border-image: initial !important; border-left-color: initial !important; border-left-style: initial !important; border-radius: 0px; border-right-color: rgb(191, 202, 218); border-right-style: solid; border-top-color: initial !important; border-top-style: initial !important; border-width: 0px 3px 0px 0px; bottom: auto; box-sizing: content-box; color: #333333; float: none; height: auto; left: auto; line-height: 1.42em; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 0.25em 0.5em 0.25em 1em; position: static; right: auto; text-align: right; text-shadow: none; top: auto; vertical-align: baseline; white-space: pre; width: auto; word-break: normal;">8</div><div class="line number9 index8 alt2" style="background: 0px 0px rgb(255, 255, 255); border-bottom-color: initial !important; border-bottom-style: initial !important; border-image: initial !important; border-left-color: initial !important; border-left-style: initial !important; border-radius: 0px; border-right-color: rgb(191, 202, 218); border-right-style: solid; border-top-color: initial !important; border-top-style: initial !important; border-width: 0px 3px 0px 0px; bottom: auto; box-sizing: content-box; color: #333333; float: none; height: auto; left: auto; line-height: 1.42em; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 0.25em 0.5em 0.25em 1em; position: static; right: auto; text-align: right; text-shadow: none; top: auto; vertical-align: baseline; white-space: pre; width: auto; word-break: normal;">9</div><div class="line number10 index9 alt1" style="background: 0px 0px rgb(249, 249, 249); border-bottom-color: initial !important; border-bottom-style: initial !important; border-image: initial !important; border-left-color: initial !important; border-left-style: initial !important; border-radius: 0px; border-right-color: rgb(191, 202, 218); border-right-style: solid; border-top-color: initial !important; border-top-style: initial !important; border-width: 0px 3px 0px 0px; bottom: auto; box-sizing: content-box; color: #333333; float: none; height: auto; left: auto; line-height: 1.42em; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 0.25em 0.5em 0.25em 1em; position: static; right: auto; text-align: right; text-shadow: none; top: auto; vertical-align: baseline; white-space: pre; width: auto; word-break: normal;">10</div></td><td class="code" style="background-attachment: initial !important; background-clip: initial !important; background-color: #f8f8f8; background-image: initial !important; background-origin: initial !important; background-position: 0px 0px; background-repeat: initial !important; background-size: initial !important; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; height: auto; left: auto; line-height: 1.42em; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; text-shadow: none; top: auto; vertical-align: top; width: 608.8px; word-break: normal;"><div class="container" style="background: 0px 0px; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; height: auto; left: auto; line-height: 1.42em; margin: 0px; max-width: 117rem; min-height: auto; outline: 0px; overflow: visible; padding: 0px; position: relative; right: auto; text-shadow: none; top: auto; vertical-align: baseline; width: auto; word-break: normal;"><div class="line number1 index0 alt2" style="background: 0px 0px rgb(255, 255, 255); border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; height: auto; left: auto; line-height: 1.42em; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 0.25em 1em; position: static; right: auto; text-shadow: none; top: auto; vertical-align: baseline; white-space: pre; width: auto; word-break: normal;"><code class="css plain" style="background: 0px 0px; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: black; float: none; font-family: "Lucida Sans Typewriter", "Lucida Console", monaco, "Bitstream Vera Sans Mono", monospace !important; height: auto; left: auto; line-height: 1.42em; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; text-shadow: none; top: auto; vertical-align: baseline; width: auto; word-break: normal;">@mixin border-radius ($values) {</code></div><div class="line number2 index1 alt1" style="background: 0px 0px rgb(249, 249, 249); border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; height: auto; left: auto; line-height: 1.42em; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 0.25em 1em; position: static; right: auto; text-shadow: none; top: auto; vertical-align: baseline; white-space: pre; width: auto; word-break: normal;"><code class="css spaces" style="background: 0px 0px; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: "Lucida Sans Typewriter", "Lucida Console", monaco, "Bitstream Vera Sans Mono", monospace !important; height: auto; left: auto; line-height: 1.42em; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; text-shadow: none; top: auto; vertical-align: baseline; width: auto; word-break: normal;"> </code><code class="css plain" style="background: 0px 0px; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: black; float: none; font-family: "Lucida Sans Typewriter", "Lucida Console", monaco, "Bitstream Vera Sans Mono", monospace !important; height: auto; left: auto; line-height: 1.42em; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; text-shadow: none; top: auto; vertical-align: baseline; width: auto; word-break: normal;">border-radius: $values;</code></div><div class="line number3 index2 alt2" style="background: 0px 0px rgb(255, 255, 255); border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; height: auto; left: auto; line-height: 1.42em; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 0.25em 1em; position: static; right: auto; text-shadow: none; top: auto; vertical-align: baseline; white-space: pre; width: auto; word-break: normal;"><code class="css plain" style="background: 0px 0px; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: black; float: none; font-family: "Lucida Sans Typewriter", "Lucida Console", monaco, "Bitstream Vera Sans Mono", monospace !important; height: auto; left: auto; line-height: 1.42em; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; text-shadow: none; top: auto; vertical-align: baseline; width: auto; word-break: normal;">}</code></div><div class="line number4 index3 alt1" style="background: 0px 0px rgb(249, 249, 249); border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; height: auto; left: auto; line-height: 1.42em; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 0.25em 1em; position: static; right: auto; text-shadow: none; top: auto; vertical-align: baseline; white-space: pre; width: auto; word-break: normal;"> </div><div class="line number5 index4 alt2" style="background: 0px 0px rgb(255, 255, 255); border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; height: auto; left: auto; line-height: 1.42em; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 0.25em 1em; position: static; right: auto; text-shadow: none; top: auto; vertical-align: baseline; white-space: pre; width: auto; word-break: normal;"><code class="css plain" style="background: 0px 0px; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: black; float: none; font-family: "Lucida Sans Typewriter", "Lucida Console", monaco, "Bitstream Vera Sans Mono", monospace !important; height: auto; left: auto; line-height: 1.42em; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; text-shadow: none; top: auto; vertical-align: baseline; width: auto; word-break: normal;">nav {</code></div><div class="line number6 index5 alt1" style="background: 0px 0px rgb(249, 249, 249); border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; height: auto; left: auto; line-height: 1.42em; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 0.25em 1em; position: static; right: auto; text-shadow: none; top: auto; vertical-align: baseline; white-space: pre; width: auto; word-break: normal;"><code class="css spaces" style="background: 0px 0px; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: "Lucida Sans Typewriter", "Lucida Console", monaco, "Bitstream Vera Sans Mono", monospace !important; height: auto; left: auto; line-height: 1.42em; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; text-shadow: none; top: auto; vertical-align: baseline; width: auto; word-break: normal;"> </code><code class="css keyword" style="background: 0px 0px; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: #006699; float: none; font-family: "Lucida Sans Typewriter", "Lucida Console", monaco, "Bitstream Vera Sans Mono", monospace !important; font-weight: 700; height: auto; left: auto; line-height: 1.42em; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; text-shadow: none; top: auto; vertical-align: baseline; width: auto; word-break: normal;">margin</code><code class="css plain" style="background: 0px 0px; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: black; float: none; font-family: "Lucida Sans Typewriter", "Lucida Console", monaco, "Bitstream Vera Sans Mono", monospace !important; height: auto; left: auto; line-height: 1.42em; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; text-shadow: none; top: auto; vertical-align: baseline; width: auto; word-break: normal;">: </code><code class="css value" style="background: 0px 0px; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: #009900; float: none; font-family: "Lucida Sans Typewriter", "Lucida Console", monaco, "Bitstream Vera Sans Mono", monospace !important; height: auto; left: auto; line-height: 1.42em; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; text-shadow: none; top: auto; vertical-align: baseline; width: auto; word-break: normal;">50px</code> <code class="css value" style="background: 0px 0px; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: #009900; float: none; font-family: "Lucida Sans Typewriter", "Lucida Console", monaco, "Bitstream Vera Sans Mono", monospace !important; height: auto; left: auto; line-height: 1.42em; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; text-shadow: none; top: auto; vertical-align: baseline; width: auto; word-break: normal;">auto</code> <code class="css value" style="background: 0px 0px; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: #009900; float: none; font-family: "Lucida Sans Typewriter", "Lucida Console", monaco, "Bitstream Vera Sans Mono", monospace !important; height: auto; left: auto; line-height: 1.42em; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; text-shadow: none; top: auto; vertical-align: baseline; width: auto; word-break: normal;">0</code><code class="css plain" style="background: 0px 0px; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: black; float: none; font-family: "Lucida Sans Typewriter", "Lucida Console", monaco, "Bitstream Vera Sans Mono", monospace !important; height: auto; left: auto; line-height: 1.42em; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; text-shadow: none; top: auto; vertical-align: baseline; width: auto; word-break: normal;">;</code></div><div class="line number7 index6 alt2" style="background: 0px 0px rgb(255, 255, 255); border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; height: auto; left: auto; line-height: 1.42em; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 0.25em 1em; position: static; right: auto; text-shadow: none; top: auto; vertical-align: baseline; white-space: pre; width: auto; word-break: normal;"><code class="css spaces" style="background: 0px 0px; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: "Lucida Sans Typewriter", "Lucida Console", monaco, "Bitstream Vera Sans Mono", monospace !important; height: auto; left: auto; line-height: 1.42em; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; text-shadow: none; top: auto; vertical-align: baseline; width: auto; word-break: normal;"> </code><code class="css keyword" style="background: 0px 0px; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: #006699; float: none; font-family: "Lucida Sans Typewriter", "Lucida Console", monaco, "Bitstream Vera Sans Mono", monospace !important; font-weight: 700; height: auto; left: auto; line-height: 1.42em; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; text-shadow: none; top: auto; vertical-align: baseline; width: auto; word-break: normal;">width</code><code class="css plain" style="background: 0px 0px; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: black; float: none; font-family: "Lucida Sans Typewriter", "Lucida Console", monaco, "Bitstream Vera Sans Mono", monospace !important; height: auto; left: auto; line-height: 1.42em; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; text-shadow: none; top: auto; vertical-align: baseline; width: auto; word-break: normal;">: </code><code class="css value" style="background: 0px 0px; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: #009900; float: none; font-family: "Lucida Sans Typewriter", "Lucida Console", monaco, "Bitstream Vera Sans Mono", monospace !important; height: auto; left: auto; line-height: 1.42em; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; text-shadow: none; top: auto; vertical-align: baseline; width: auto; word-break: normal;">788px</code><code class="css plain" style="background: 0px 0px; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: black; float: none; font-family: "Lucida Sans Typewriter", "Lucida Console", monaco, "Bitstream Vera Sans Mono", monospace !important; height: auto; left: auto; line-height: 1.42em; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; text-shadow: none; top: auto; vertical-align: baseline; width: auto; word-break: normal;">;</code></div><div class="line number8 index7 alt1" style="background: 0px 0px rgb(249, 249, 249); border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; height: auto; left: auto; line-height: 1.42em; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 0.25em 1em; position: static; right: auto; text-shadow: none; top: auto; vertical-align: baseline; white-space: pre; width: auto; word-break: normal;"><code class="css spaces" style="background: 0px 0px; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: "Lucida Sans Typewriter", "Lucida Console", monaco, "Bitstream Vera Sans Mono", monospace !important; height: auto; left: auto; line-height: 1.42em; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; text-shadow: none; top: auto; vertical-align: baseline; width: auto; word-break: normal;"> </code><code class="css keyword" style="background: 0px 0px; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: #006699; float: none; font-family: "Lucida Sans Typewriter", "Lucida Console", monaco, "Bitstream Vera Sans Mono", monospace !important; font-weight: 700; height: auto; left: auto; line-height: 1.42em; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; text-shadow: none; top: auto; vertical-align: baseline; width: auto; word-break: normal;">height</code><code class="css plain" style="background: 0px 0px; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: black; float: none; font-family: "Lucida Sans Typewriter", "Lucida Console", monaco, "Bitstream Vera Sans Mono", monospace !important; height: auto; left: auto; line-height: 1.42em; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; text-shadow: none; top: auto; vertical-align: baseline; width: auto; word-break: normal;">: </code><code class="css value" style="background: 0px 0px; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: #009900; float: none; font-family: "Lucida Sans Typewriter", "Lucida Console", monaco, "Bitstream Vera Sans Mono", monospace !important; height: auto; left: auto; line-height: 1.42em; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; text-shadow: none; top: auto; vertical-align: baseline; width: auto; word-break: normal;">45px</code><code class="css plain" style="background: 0px 0px; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: black; float: none; font-family: "Lucida Sans Typewriter", "Lucida Console", monaco, "Bitstream Vera Sans Mono", monospace !important; height: auto; left: auto; line-height: 1.42em; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; text-shadow: none; top: auto; vertical-align: baseline; width: auto; word-break: normal;">;</code></div><div class="line number9 index8 alt2" style="background: 0px 0px rgb(255, 255, 255); border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; height: auto; left: auto; line-height: 1.42em; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 0.25em 1em; position: static; right: auto; text-shadow: none; top: auto; vertical-align: baseline; white-space: pre; width: auto; word-break: normal;"><code class="css spaces" style="background: 0px 0px; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: "Lucida Sans Typewriter", "Lucida Console", monaco, "Bitstream Vera Sans Mono", monospace !important; height: auto; left: auto; line-height: 1.42em; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; text-shadow: none; top: auto; vertical-align: baseline; width: auto; word-break: normal;"> </code><code class="css plain" style="background: 0px 0px; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: black; float: none; font-family: "Lucida Sans Typewriter", "Lucida Console", monaco, "Bitstream Vera Sans Mono", monospace !important; height: auto; left: auto; line-height: 1.42em; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; text-shadow: none; top: auto; vertical-align: baseline; width: auto; word-break: normal;">@include border-radius(</code><code class="css value" style="background: 0px 0px; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: #009900; float: none; font-family: "Lucida Sans Typewriter", "Lucida Console", monaco, "Bitstream Vera Sans Mono", monospace !important; height: auto; left: auto; line-height: 1.42em; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; text-shadow: none; top: auto; vertical-align: baseline; width: auto; word-break: normal;">10px</code><code class="css plain" style="background: 0px 0px; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: black; float: none; font-family: "Lucida Sans Typewriter", "Lucida Console", monaco, "Bitstream Vera Sans Mono", monospace !important; height: auto; left: auto; line-height: 1.42em; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; text-shadow: none; top: auto; vertical-align: baseline; width: auto; word-break: normal;">);</code></div><div class="line number10 index9 alt1" style="background: 0px 0px rgb(249, 249, 249); border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; height: auto; left: auto; line-height: 1.42em; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 0.25em 1em; position: static; right: auto; text-shadow: none; top: auto; vertical-align: baseline; white-space: pre; width: auto; word-break: normal;"><code class="css plain" style="background: 0px 0px; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: black; float: none; font-family: "Lucida Sans Typewriter", "Lucida Console", monaco, "Bitstream Vera Sans Mono", monospace !important; height: auto; left: auto; line-height: 1.42em; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; text-shadow: none; top: auto; vertical-align: baseline; width: auto; word-break: normal;">}</code></div></div></td></tr></tbody></table></div><div><br /></div><div>LESS</div><div>Utilizamos un selector de clase</div><div><br /></div><div><table border="0" cellpadding="0" cellspacing="0" style="background-attachment: initial !important; background-clip: initial !important; background-image: initial !important; background-origin: initial !important; background-position: 0px 0px; background-repeat: initial !important; background-size: initial !important; border-collapse: collapse; border-radius: 0px; border-spacing: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: #333333; font-family: "Lucida Sans Typewriter", "Lucida Console", monaco, "Bitstream Vera Sans Mono", monospace !important; font-size: 14px; font-variant-ligatures: common-ligatures; height: auto; left: auto; line-height: 1.42em; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; table-layout: fixed; text-shadow: none; top: auto; vertical-align: baseline; width: auto; word-break: normal;"><tbody style="background-attachment: initial !important; background-clip: initial !important; background-image: initial !important; background-origin: initial !important; background-position: 0px 0px; background-repeat: initial !important; background-size: initial !important; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; height: auto; left: auto; line-height: 1.42em; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; text-shadow: none; top: auto; vertical-align: baseline; width: auto; word-break: normal;"><tr style="background-attachment: initial !important; background-clip: initial !important; background-image: initial !important; background-origin: initial !important; background-position: 0px 0px; background-repeat: initial !important; background-size: initial !important; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; height: auto; left: auto; line-height: 1.42em; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; text-shadow: none; top: auto; vertical-align: baseline; width: auto; word-break: normal;"><td class="gutter" style="background-attachment: initial !important; background-clip: initial !important; background-color: #f8f8f8; background-image: initial !important; background-origin: initial !important; background-position: 0px 0px; background-repeat: initial !important; background-size: initial !important; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: #d2d2d2; float: none; height: auto; left: auto; line-height: 1.42em; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; text-shadow: none; top: auto; vertical-align: baseline; width: auto; word-break: normal;"><div class="line number1 index0 alt2" style="background: 0px 0px rgb(255, 255, 255); border-bottom-color: initial !important; border-bottom-style: initial !important; border-image: initial !important; border-left-color: initial !important; border-left-style: initial !important; border-radius: 0px; border-right-color: rgb(191, 202, 218); border-right-style: solid; border-top-color: initial !important; border-top-style: initial !important; border-width: 0px 3px 0px 0px; bottom: auto; box-sizing: content-box; color: #333333; float: none; height: auto; left: auto; line-height: 1.42em; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 0.25em 0.5em 0.25em 1em; position: static; right: auto; text-align: right; text-shadow: none; top: auto; vertical-align: baseline; white-space: pre; width: auto; word-break: normal;">1</div><div class="line number2 index1 alt1" style="background: 0px 0px rgb(249, 249, 249); border-bottom-color: initial !important; border-bottom-style: initial !important; border-image: initial !important; border-left-color: initial !important; border-left-style: initial !important; border-radius: 0px; border-right-color: rgb(191, 202, 218); border-right-style: solid; border-top-color: initial !important; border-top-style: initial !important; border-width: 0px 3px 0px 0px; bottom: auto; box-sizing: content-box; color: #333333; float: none; height: auto; left: auto; line-height: 1.42em; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 0.25em 0.5em 0.25em 1em; position: static; right: auto; text-align: right; text-shadow: none; top: auto; vertical-align: baseline; white-space: pre; width: auto; word-break: normal;">2</div><div class="line number3 index2 alt2" style="background: 0px 0px rgb(255, 255, 255); border-bottom-color: initial !important; border-bottom-style: initial !important; border-image: initial !important; border-left-color: initial !important; border-left-style: initial !important; border-radius: 0px; border-right-color: rgb(191, 202, 218); border-right-style: solid; border-top-color: initial !important; border-top-style: initial !important; border-width: 0px 3px 0px 0px; bottom: auto; box-sizing: content-box; color: #333333; float: none; height: auto; left: auto; line-height: 1.42em; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 0.25em 0.5em 0.25em 1em; position: static; right: auto; text-align: right; text-shadow: none; top: auto; vertical-align: baseline; white-space: pre; width: auto; word-break: normal;">3</div><div class="line number4 index3 alt1" style="background: 0px 0px rgb(249, 249, 249); border-bottom-color: initial !important; border-bottom-style: initial !important; border-image: initial !important; border-left-color: initial !important; border-left-style: initial !important; border-radius: 0px; border-right-color: rgb(191, 202, 218); border-right-style: solid; border-top-color: initial !important; border-top-style: initial !important; border-width: 0px 3px 0px 0px; bottom: auto; box-sizing: content-box; color: #333333; float: none; height: auto; left: auto; line-height: 1.42em; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 0.25em 0.5em 0.25em 1em; position: static; right: auto; text-align: right; text-shadow: none; top: auto; vertical-align: baseline; white-space: pre; width: auto; word-break: normal;">4</div><div class="line number5 index4 alt2" style="background: 0px 0px rgb(255, 255, 255); border-bottom-color: initial !important; border-bottom-style: initial !important; border-image: initial !important; border-left-color: initial !important; border-left-style: initial !important; border-radius: 0px; border-right-color: rgb(191, 202, 218); border-right-style: solid; border-top-color: initial !important; border-top-style: initial !important; border-width: 0px 3px 0px 0px; bottom: auto; box-sizing: content-box; color: #333333; float: none; height: auto; left: auto; line-height: 1.42em; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 0.25em 0.5em 0.25em 1em; position: static; right: auto; text-align: right; text-shadow: none; top: auto; vertical-align: baseline; white-space: pre; width: auto; word-break: normal;">5</div><div class="line number6 index5 alt1" style="background: 0px 0px rgb(249, 249, 249); border-bottom-color: initial !important; border-bottom-style: initial !important; border-image: initial !important; border-left-color: initial !important; border-left-style: initial !important; border-radius: 0px; border-right-color: rgb(191, 202, 218); border-right-style: solid; border-top-color: initial !important; border-top-style: initial !important; border-width: 0px 3px 0px 0px; bottom: auto; box-sizing: content-box; color: #333333; float: none; height: auto; left: auto; line-height: 1.42em; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 0.25em 0.5em 0.25em 1em; position: static; right: auto; text-align: right; text-shadow: none; top: auto; vertical-align: baseline; white-space: pre; width: auto; word-break: normal;">6</div><div class="line number7 index6 alt2" style="background: 0px 0px rgb(255, 255, 255); border-bottom-color: initial !important; border-bottom-style: initial !important; border-image: initial !important; border-left-color: initial !important; border-left-style: initial !important; border-radius: 0px; border-right-color: rgb(191, 202, 218); border-right-style: solid; border-top-color: initial !important; border-top-style: initial !important; border-width: 0px 3px 0px 0px; bottom: auto; box-sizing: content-box; color: #333333; float: none; height: auto; left: auto; line-height: 1.42em; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 0.25em 0.5em 0.25em 1em; position: static; right: auto; text-align: right; text-shadow: none; top: auto; vertical-align: baseline; white-space: pre; width: auto; word-break: normal;">7</div><div class="line number8 index7 alt1" style="background: 0px 0px rgb(249, 249, 249); border-bottom-color: initial !important; border-bottom-style: initial !important; border-image: initial !important; border-left-color: initial !important; border-left-style: initial !important; border-radius: 0px; border-right-color: rgb(191, 202, 218); border-right-style: solid; border-top-color: initial !important; border-top-style: initial !important; border-width: 0px 3px 0px 0px; bottom: auto; box-sizing: content-box; color: #333333; float: none; height: auto; left: auto; line-height: 1.42em; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 0.25em 0.5em 0.25em 1em; position: static; right: auto; text-align: right; text-shadow: none; top: auto; vertical-align: baseline; white-space: pre; width: auto; word-break: normal;">8</div><div class="line number9 index8 alt2" style="background: 0px 0px rgb(255, 255, 255); border-bottom-color: initial !important; border-bottom-style: initial !important; border-image: initial !important; border-left-color: initial !important; border-left-style: initial !important; border-radius: 0px; border-right-color: rgb(191, 202, 218); border-right-style: solid; border-top-color: initial !important; border-top-style: initial !important; border-width: 0px 3px 0px 0px; bottom: auto; box-sizing: content-box; color: #333333; float: none; height: auto; left: auto; line-height: 1.42em; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 0.25em 0.5em 0.25em 1em; position: static; right: auto; text-align: right; text-shadow: none; top: auto; vertical-align: baseline; white-space: pre; width: auto; word-break: normal;">9</div></td><td class="code" style="background-attachment: initial !important; background-clip: initial !important; background-color: #f8f8f8; background-image: initial !important; background-origin: initial !important; background-position: 0px 0px; background-repeat: initial !important; background-size: initial !important; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; height: auto; left: auto; line-height: 1.42em; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; text-shadow: none; top: auto; vertical-align: top; width: 617.2px; word-break: normal;"><div class="container" style="background: 0px 0px; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; height: auto; left: auto; line-height: 1.42em; margin: 0px; max-width: 117rem; min-height: auto; outline: 0px; overflow: visible; padding: 0px; position: relative; right: auto; text-shadow: none; top: auto; vertical-align: baseline; width: auto; word-break: normal;"><div class="line number1 index0 alt2" style="background: 0px 0px rgb(255, 255, 255); border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; height: auto; left: auto; line-height: 1.42em; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 0.25em 1em; position: static; right: auto; text-shadow: none; top: auto; vertical-align: baseline; white-space: pre; width: auto; word-break: normal;"><code class="css plain" style="background: 0px 0px; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: black; float: none; font-family: "Lucida Sans Typewriter", "Lucida Console", monaco, "Bitstream Vera Sans Mono", monospace !important; height: auto; left: auto; line-height: 1.42em; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; text-shadow: none; top: auto; vertical-align: baseline; width: auto; word-break: normal;">.border( @radius ) {</code></div><div class="line number2 index1 alt1" style="background: 0px 0px rgb(249, 249, 249); border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; height: auto; left: auto; line-height: 1.42em; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 0.25em 1em; position: static; right: auto; text-shadow: none; top: auto; vertical-align: baseline; white-space: pre; width: auto; word-break: normal;"><code class="css spaces" style="background: 0px 0px; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: "Lucida Sans Typewriter", "Lucida Console", monaco, "Bitstream Vera Sans Mono", monospace !important; height: auto; left: auto; line-height: 1.42em; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; text-shadow: none; top: auto; vertical-align: baseline; width: auto; word-break: normal;"> </code><code class="css plain" style="background: 0px 0px; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: black; float: none; font-family: "Lucida Sans Typewriter", "Lucida Console", monaco, "Bitstream Vera Sans Mono", monospace !important; height: auto; left: auto; line-height: 1.42em; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; text-shadow: none; top: auto; vertical-align: baseline; width: auto; word-break: normal;">border-radius: @radius;</code></div><div class="line number3 index2 alt2" style="background: 0px 0px rgb(255, 255, 255); border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; height: auto; left: auto; line-height: 1.42em; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 0.25em 1em; position: static; right: auto; text-shadow: none; top: auto; vertical-align: baseline; white-space: pre; width: auto; word-break: normal;"><code class="css plain" style="background: 0px 0px; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: black; float: none; font-family: "Lucida Sans Typewriter", "Lucida Console", monaco, "Bitstream Vera Sans Mono", monospace !important; height: auto; left: auto; line-height: 1.42em; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; text-shadow: none; top: auto; vertical-align: baseline; width: auto; word-break: normal;">}</code></div><div class="line number4 index3 alt1" style="background: 0px 0px rgb(249, 249, 249); border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; height: auto; left: auto; line-height: 1.42em; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 0.25em 1em; position: static; right: auto; text-shadow: none; top: auto; vertical-align: baseline; white-space: pre; width: auto; word-break: normal;"><code class="css plain" style="background: 0px 0px; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: black; float: none; font-family: "Lucida Sans Typewriter", "Lucida Console", monaco, "Bitstream Vera Sans Mono", monospace !important; height: auto; left: auto; line-height: 1.42em; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; text-shadow: none; top: auto; vertical-align: baseline; width: auto; word-break: normal;">nav {</code></div><div class="line number5 index4 alt2" style="background: 0px 0px rgb(255, 255, 255); border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; height: auto; left: auto; line-height: 1.42em; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 0.25em 1em; position: static; right: auto; text-shadow: none; top: auto; vertical-align: baseline; white-space: pre; width: auto; word-break: normal;"><code class="css spaces" style="background: 0px 0px; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: "Lucida Sans Typewriter", "Lucida Console", monaco, "Bitstream Vera Sans Mono", monospace !important; height: auto; left: auto; line-height: 1.42em; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; text-shadow: none; top: auto; vertical-align: baseline; width: auto; word-break: normal;"> </code><code class="css keyword" style="background: 0px 0px; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: #006699; float: none; font-family: "Lucida Sans Typewriter", "Lucida Console", monaco, "Bitstream Vera Sans Mono", monospace !important; font-weight: 700; height: auto; left: auto; line-height: 1.42em; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; text-shadow: none; top: auto; vertical-align: baseline; width: auto; word-break: normal;">margin</code><code class="css plain" style="background: 0px 0px; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: black; float: none; font-family: "Lucida Sans Typewriter", "Lucida Console", monaco, "Bitstream Vera Sans Mono", monospace !important; height: auto; left: auto; line-height: 1.42em; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; text-shadow: none; top: auto; vertical-align: baseline; width: auto; word-break: normal;">: </code><code class="css value" style="background: 0px 0px; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: #009900; float: none; font-family: "Lucida Sans Typewriter", "Lucida Console", monaco, "Bitstream Vera Sans Mono", monospace !important; height: auto; left: auto; line-height: 1.42em; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; text-shadow: none; top: auto; vertical-align: baseline; width: auto; word-break: normal;">50px</code> <code class="css value" style="background: 0px 0px; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: #009900; float: none; font-family: "Lucida Sans Typewriter", "Lucida Console", monaco, "Bitstream Vera Sans Mono", monospace !important; height: auto; left: auto; line-height: 1.42em; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; text-shadow: none; top: auto; vertical-align: baseline; width: auto; word-break: normal;">auto</code> <code class="css value" style="background: 0px 0px; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: #009900; float: none; font-family: "Lucida Sans Typewriter", "Lucida Console", monaco, "Bitstream Vera Sans Mono", monospace !important; height: auto; left: auto; line-height: 1.42em; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; text-shadow: none; top: auto; vertical-align: baseline; width: auto; word-break: normal;">0</code><code class="css plain" style="background: 0px 0px; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: black; float: none; font-family: "Lucida Sans Typewriter", "Lucida Console", monaco, "Bitstream Vera Sans Mono", monospace !important; height: auto; left: auto; line-height: 1.42em; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; text-shadow: none; top: auto; vertical-align: baseline; width: auto; word-break: normal;">;</code></div><div class="line number6 index5 alt1" style="background: 0px 0px rgb(249, 249, 249); border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; height: auto; left: auto; line-height: 1.42em; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 0.25em 1em; position: static; right: auto; text-shadow: none; top: auto; vertical-align: baseline; white-space: pre; width: auto; word-break: normal;"><code class="css spaces" style="background: 0px 0px; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: "Lucida Sans Typewriter", "Lucida Console", monaco, "Bitstream Vera Sans Mono", monospace !important; height: auto; left: auto; line-height: 1.42em; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; text-shadow: none; top: auto; vertical-align: baseline; width: auto; word-break: normal;"> </code><code class="css keyword" style="background: 0px 0px; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: #006699; float: none; font-family: "Lucida Sans Typewriter", "Lucida Console", monaco, "Bitstream Vera Sans Mono", monospace !important; font-weight: 700; height: auto; left: auto; line-height: 1.42em; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; text-shadow: none; top: auto; vertical-align: baseline; width: auto; word-break: normal;">width</code><code class="css plain" style="background: 0px 0px; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: black; float: none; font-family: "Lucida Sans Typewriter", "Lucida Console", monaco, "Bitstream Vera Sans Mono", monospace !important; height: auto; left: auto; line-height: 1.42em; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; text-shadow: none; top: auto; vertical-align: baseline; width: auto; word-break: normal;">: </code><code class="css value" style="background: 0px 0px; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: #009900; float: none; font-family: "Lucida Sans Typewriter", "Lucida Console", monaco, "Bitstream Vera Sans Mono", monospace !important; height: auto; left: auto; line-height: 1.42em; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; text-shadow: none; top: auto; vertical-align: baseline; width: auto; word-break: normal;">788px</code><code class="css plain" style="background: 0px 0px; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: black; float: none; font-family: "Lucida Sans Typewriter", "Lucida Console", monaco, "Bitstream Vera Sans Mono", monospace !important; height: auto; left: auto; line-height: 1.42em; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; text-shadow: none; top: auto; vertical-align: baseline; width: auto; word-break: normal;">;</code></div><div class="line number7 index6 alt2" style="background: 0px 0px rgb(255, 255, 255); border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; height: auto; left: auto; line-height: 1.42em; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 0.25em 1em; position: static; right: auto; text-shadow: none; top: auto; vertical-align: baseline; white-space: pre; width: auto; word-break: normal;"><code class="css spaces" style="background: 0px 0px; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: "Lucida Sans Typewriter", "Lucida Console", monaco, "Bitstream Vera Sans Mono", monospace !important; height: auto; left: auto; line-height: 1.42em; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; text-shadow: none; top: auto; vertical-align: baseline; width: auto; word-break: normal;"> </code><code class="css keyword" style="background: 0px 0px; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: #006699; float: none; font-family: "Lucida Sans Typewriter", "Lucida Console", monaco, "Bitstream Vera Sans Mono", monospace !important; font-weight: 700; height: auto; left: auto; line-height: 1.42em; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; text-shadow: none; top: auto; vertical-align: baseline; width: auto; word-break: normal;">height</code><code class="css plain" style="background: 0px 0px; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: black; float: none; font-family: "Lucida Sans Typewriter", "Lucida Console", monaco, "Bitstream Vera Sans Mono", monospace !important; height: auto; left: auto; line-height: 1.42em; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; text-shadow: none; top: auto; vertical-align: baseline; width: auto; word-break: normal;">: </code><code class="css value" style="background: 0px 0px; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: #009900; float: none; font-family: "Lucida Sans Typewriter", "Lucida Console", monaco, "Bitstream Vera Sans Mono", monospace !important; height: auto; left: auto; line-height: 1.42em; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; text-shadow: none; top: auto; vertical-align: baseline; width: auto; word-break: normal;">45px</code><code class="css plain" style="background: 0px 0px; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: black; float: none; font-family: "Lucida Sans Typewriter", "Lucida Console", monaco, "Bitstream Vera Sans Mono", monospace !important; height: auto; left: auto; line-height: 1.42em; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; text-shadow: none; top: auto; vertical-align: baseline; width: auto; word-break: normal;">;</code></div><div class="line number8 index7 alt1" style="background: 0px 0px rgb(249, 249, 249); border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; height: auto; left: auto; line-height: 1.42em; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 0.25em 1em; position: static; right: auto; text-shadow: none; top: auto; vertical-align: baseline; white-space: pre; width: auto; word-break: normal;"><code class="css spaces" style="background: 0px 0px; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: "Lucida Sans Typewriter", "Lucida Console", monaco, "Bitstream Vera Sans Mono", monospace !important; height: auto; left: auto; line-height: 1.42em; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; text-shadow: none; top: auto; vertical-align: baseline; width: auto; word-break: normal;"> </code><code class="css plain" style="background: 0px 0px; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: black; float: none; font-family: "Lucida Sans Typewriter", "Lucida Console", monaco, "Bitstream Vera Sans Mono", monospace !important; height: auto; left: auto; line-height: 1.42em; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; text-shadow: none; top: auto; vertical-align: baseline; width: auto; word-break: normal;">.border(</code><code class="css value" style="background: 0px 0px; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: #009900; float: none; font-family: "Lucida Sans Typewriter", "Lucida Console", monaco, "Bitstream Vera Sans Mono", monospace !important; height: auto; left: auto; line-height: 1.42em; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; text-shadow: none; top: auto; vertical-align: baseline; width: auto; word-break: normal;">10px</code><code class="css plain" style="background: 0px 0px; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: black; float: none; font-family: "Lucida Sans Typewriter", "Lucida Console", monaco, "Bitstream Vera Sans Mono", monospace !important; height: auto; left: auto; line-height: 1.42em; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; text-shadow: none; top: auto; vertical-align: baseline; width: auto; word-break: normal;">);</code></div><div class="line number9 index8 alt2" style="background: 0px 0px rgb(255, 255, 255); border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; height: auto; left: auto; line-height: 1.42em; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 0.25em 1em; position: static; right: auto; text-shadow: none; top: auto; vertical-align: baseline; white-space: pre; width: auto; word-break: normal;"><code class="css plain" style="background: 0px 0px; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: black; float: none; font-family: "Lucida Sans Typewriter", "Lucida Console", monaco, "Bitstream Vera Sans Mono", monospace !important; height: auto; left: auto; line-height: 1.42em; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; text-shadow: none; top: auto; vertical-align: baseline; width: auto; word-break: normal;">}</code></div><div class="line number9 index8 alt2" style="background: 0px 0px rgb(255, 255, 255); border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; height: auto; left: auto; line-height: 1.42em; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 0.25em 1em; position: static; right: auto; text-shadow: none; top: auto; vertical-align: baseline; white-space: pre; width: auto; word-break: normal;"><code class="css plain" style="background: 0px 0px; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: black; float: none; font-family: "Lucida Sans Typewriter", "Lucida Console", monaco, "Bitstream Vera Sans Mono", monospace !important; height: auto; left: auto; line-height: 1.42em; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; text-shadow: none; top: auto; vertical-align: baseline; width: auto; word-break: normal;"><br /></code></div></div></td></tr></tbody></table></div><div><b><br /></b></div><div><b>4. Herencia</b></div><div>El concepto es similar a mixins pero en lugar de copiar todas las propiedades CSS, agrupará los selectores que tienen exactamente las mismas propiedades y valores de conjunto usando el.</div><div><br /></div><div>SASS</div><div>Utilizamos @extends</div><div><br /></div><div><div class="line number1 index0 alt2" style="background: 0px 0px rgb(255, 255, 255); border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: #333333; float: none; font-family: "lucida sans typewriter", "lucida console", monaco, "bitstream vera sans mono", monospace; font-size: 14px; font-variant-ligatures: common-ligatures; height: auto; left: auto; line-height: 1.42em; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 0.25em 1em; position: static; right: auto; text-shadow: none; top: auto; vertical-align: baseline; white-space: pre; width: auto; word-break: normal;"><code class="css plain" style="background: 0px 0px; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: black; float: none; font-family: "Lucida Sans Typewriter", "Lucida Console", monaco, "Bitstream Vera Sans Mono", monospace !important; height: auto; left: auto; line-height: 1.42em; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; text-shadow: none; top: auto; vertical-align: baseline; width: auto; word-break: normal;">.</code><code class="css value" style="background: 0px 0px; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: #009900; float: none; font-family: "Lucida Sans Typewriter", "Lucida Console", monaco, "Bitstream Vera Sans Mono", monospace !important; height: auto; left: auto; line-height: 1.42em; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; text-shadow: none; top: auto; vertical-align: baseline; width: auto; word-break: normal;">circle</code> <code class="css plain" style="background: 0px 0px; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: black; float: none; font-family: "Lucida Sans Typewriter", "Lucida Console", monaco, "Bitstream Vera Sans Mono", monospace !important; height: auto; left: auto; line-height: 1.42em; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; text-shadow: none; top: auto; vertical-align: baseline; width: auto; word-break: normal;">{</code></div><div class="line number2 index1 alt1" style="background: 0px 0px rgb(249, 249, 249); border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: #333333; float: none; font-family: "lucida sans typewriter", "lucida console", monaco, "bitstream vera sans mono", monospace; font-size: 14px; font-variant-ligatures: common-ligatures; height: auto; left: auto; line-height: 1.42em; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 0.25em 1em; position: static; right: auto; text-shadow: none; top: auto; vertical-align: baseline; white-space: pre; width: auto; word-break: normal;"><code class="css spaces" style="background: 0px 0px; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: "Lucida Sans Typewriter", "Lucida Console", monaco, "Bitstream Vera Sans Mono", monospace !important; height: auto; left: auto; line-height: 1.42em; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; text-shadow: none; top: auto; vertical-align: baseline; width: auto; word-break: normal;"> </code><code class="css keyword" style="background: 0px 0px; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: #006699; float: none; font-family: "Lucida Sans Typewriter", "Lucida Console", monaco, "Bitstream Vera Sans Mono", monospace !important; font-weight: 700; height: auto; left: auto; line-height: 1.42em; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; text-shadow: none; top: auto; vertical-align: baseline; width: auto; word-break: normal;">border</code><code class="css plain" style="background: 0px 0px; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: black; float: none; font-family: "Lucida Sans Typewriter", "Lucida Console", monaco, "Bitstream Vera Sans Mono", monospace !important; height: auto; left: auto; line-height: 1.42em; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; text-shadow: none; top: auto; vertical-align: baseline; width: auto; word-break: normal;">: </code><code class="css value" style="background: 0px 0px; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: #009900; float: none; font-family: "Lucida Sans Typewriter", "Lucida Console", monaco, "Bitstream Vera Sans Mono", monospace !important; height: auto; left: auto; line-height: 1.42em; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; text-shadow: none; top: auto; vertical-align: baseline; width: auto; word-break: normal;">1px</code> <code class="css value" style="background: 0px 0px; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: #009900; float: none; font-family: "Lucida Sans Typewriter", "Lucida Console", monaco, "Bitstream Vera Sans Mono", monospace !important; height: auto; left: auto; line-height: 1.42em; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; text-shadow: none; top: auto; vertical-align: baseline; width: auto; word-break: normal;">solid</code> <code class="css value" style="background: 0px 0px; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: #009900; float: none; font-family: "Lucida Sans Typewriter", "Lucida Console", monaco, "Bitstream Vera Sans Mono", monospace !important; height: auto; left: auto; line-height: 1.42em; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; text-shadow: none; top: auto; vertical-align: baseline; width: auto; word-break: normal;">#ccc</code><code class="css plain" style="background: 0px 0px; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: black; float: none; font-family: "Lucida Sans Typewriter", "Lucida Console", monaco, "Bitstream Vera Sans Mono", monospace !important; height: auto; left: auto; line-height: 1.42em; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; text-shadow: none; top: auto; vertical-align: baseline; width: auto; word-break: normal;">;</code></div><div class="line number3 index2 alt2" style="background: 0px 0px rgb(255, 255, 255); border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: #333333; float: none; font-family: "lucida sans typewriter", "lucida console", monaco, "bitstream vera sans mono", monospace; font-size: 14px; font-variant-ligatures: common-ligatures; height: auto; left: auto; line-height: 1.42em; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 0.25em 1em; position: static; right: auto; text-shadow: none; top: auto; vertical-align: baseline; white-space: pre; width: auto; word-break: normal;"><code class="css spaces" style="background: 0px 0px; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: "Lucida Sans Typewriter", "Lucida Console", monaco, "Bitstream Vera Sans Mono", monospace !important; height: auto; left: auto; line-height: 1.42em; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; text-shadow: none; top: auto; vertical-align: baseline; width: auto; word-break: normal;"> </code><code class="css plain" style="background: 0px 0px; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: black; float: none; font-family: "Lucida Sans Typewriter", "Lucida Console", monaco, "Bitstream Vera Sans Mono", monospace !important; height: auto; left: auto; line-height: 1.42em; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; text-shadow: none; top: auto; vertical-align: baseline; width: auto; word-break: normal;">border-radius: </code><code class="css value" style="background: 0px 0px; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: #009900; float: none; font-family: "Lucida Sans Typewriter", "Lucida Console", monaco, "Bitstream Vera Sans Mono", monospace !important; height: auto; left: auto; line-height: 1.42em; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; text-shadow: none; top: auto; vertical-align: baseline; width: auto; word-break: normal;">50px</code><code class="css plain" style="background: 0px 0px; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: black; float: none; font-family: "Lucida Sans Typewriter", "Lucida Console", monaco, "Bitstream Vera Sans Mono", monospace !important; height: auto; left: auto; line-height: 1.42em; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; text-shadow: none; top: auto; vertical-align: baseline; width: auto; word-break: normal;">;</code></div><div class="line number4 index3 alt1" style="background: 0px 0px rgb(249, 249, 249); border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: #333333; float: none; font-family: "lucida sans typewriter", "lucida console", monaco, "bitstream vera sans mono", monospace; font-size: 14px; font-variant-ligatures: common-ligatures; height: auto; left: auto; line-height: 1.42em; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 0.25em 1em; position: static; right: auto; text-shadow: none; top: auto; vertical-align: baseline; white-space: pre; width: auto; word-break: normal;"><code class="css spaces" style="background: 0px 0px; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: "Lucida Sans Typewriter", "Lucida Console", monaco, "Bitstream Vera Sans Mono", monospace !important; height: auto; left: auto; line-height: 1.42em; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; text-shadow: none; top: auto; vertical-align: baseline; width: auto; word-break: normal;"> </code><code class="css keyword" style="background: 0px 0px; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: #006699; float: none; font-family: "Lucida Sans Typewriter", "Lucida Console", monaco, "Bitstream Vera Sans Mono", monospace !important; font-weight: 700; height: auto; left: auto; line-height: 1.42em; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; text-shadow: none; top: auto; vertical-align: baseline; width: auto; word-break: normal;">overflow</code><code class="css plain" style="background: 0px 0px; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: black; float: none; font-family: "Lucida Sans Typewriter", "Lucida Console", monaco, "Bitstream Vera Sans Mono", monospace !important; height: auto; left: auto; line-height: 1.42em; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; text-shadow: none; top: auto; vertical-align: baseline; width: auto; word-break: normal;">: </code><code class="css value" style="background: 0px 0px; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: #009900; float: none; font-family: "Lucida Sans Typewriter", "Lucida Console", monaco, "Bitstream Vera Sans Mono", monospace !important; height: auto; left: auto; line-height: 1.42em; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; text-shadow: none; top: auto; vertical-align: baseline; width: auto; word-break: normal;">hidden</code><code class="css plain" style="background: 0px 0px; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: black; float: none; font-family: "Lucida Sans Typewriter", "Lucida Console", monaco, "Bitstream Vera Sans Mono", monospace !important; height: auto; left: auto; line-height: 1.42em; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; text-shadow: none; top: auto; vertical-align: baseline; width: auto; word-break: normal;">;</code></div><div class="line number5 index4 alt2" style="background: 0px 0px rgb(255, 255, 255); border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: #333333; float: none; font-family: "lucida sans typewriter", "lucida console", monaco, "bitstream vera sans mono", monospace; font-size: 14px; font-variant-ligatures: common-ligatures; height: auto; left: auto; line-height: 1.42em; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 0.25em 1em; position: static; right: auto; text-shadow: none; top: auto; vertical-align: baseline; white-space: pre; width: auto; word-break: normal;"><code class="css plain" style="background: 0px 0px; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: black; float: none; font-family: "Lucida Sans Typewriter", "Lucida Console", monaco, "Bitstream Vera Sans Mono", monospace !important; height: auto; left: auto; line-height: 1.42em; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; text-shadow: none; top: auto; vertical-align: baseline; width: auto; word-break: normal;">}</code></div><div class="line number6 index5 alt1" style="background: 0px 0px rgb(249, 249, 249); border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: #333333; float: none; font-family: "lucida sans typewriter", "lucida console", monaco, "bitstream vera sans mono", monospace; font-size: 14px; font-variant-ligatures: common-ligatures; height: auto; left: auto; line-height: 1.42em; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 0.25em 1em; position: static; right: auto; text-shadow: none; top: auto; vertical-align: baseline; white-space: pre; width: auto; word-break: normal;"><code class="css plain" style="background: 0px 0px; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: black; float: none; font-family: "Lucida Sans Typewriter", "Lucida Console", monaco, "Bitstream Vera Sans Mono", monospace !important; height: auto; left: auto; line-height: 1.42em; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; text-shadow: none; top: auto; vertical-align: baseline; width: auto; word-break: normal;">.avatar {</code></div><div class="line number7 index6 alt2" style="background: 0px 0px rgb(255, 255, 255); border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: #333333; float: none; font-family: "lucida sans typewriter", "lucida console", monaco, "bitstream vera sans mono", monospace; font-size: 14px; font-variant-ligatures: common-ligatures; height: auto; left: auto; line-height: 1.42em; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 0.25em 1em; position: static; right: auto; text-shadow: none; top: auto; vertical-align: baseline; white-space: pre; width: auto; word-break: normal;"><code class="css spaces" style="background: 0px 0px; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: "Lucida Sans Typewriter", "Lucida Console", monaco, "Bitstream Vera Sans Mono", monospace !important; height: auto; left: auto; line-height: 1.42em; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; text-shadow: none; top: auto; vertical-align: baseline; width: auto; word-break: normal;"> </code><code class="css plain" style="background: 0px 0px; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: black; float: none; font-family: "Lucida Sans Typewriter", "Lucida Console", monaco, "Bitstream Vera Sans Mono", monospace !important; height: auto; left: auto; line-height: 1.42em; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; text-shadow: none; top: auto; vertical-align: baseline; width: auto; word-break: normal;">@extend .</code><code class="css value" style="background: 0px 0px; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: #009900; float: none; font-family: "Lucida Sans Typewriter", "Lucida Console", monaco, "Bitstream Vera Sans Mono", monospace !important; height: auto; left: auto; line-height: 1.42em; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; text-shadow: none; top: auto; vertical-align: baseline; width: auto; word-break: normal;">circle</code><code class="css plain" style="background: 0px 0px; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: black; float: none; font-family: "Lucida Sans Typewriter", "Lucida Console", monaco, "Bitstream Vera Sans Mono", monospace !important; height: auto; left: auto; line-height: 1.42em; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; text-shadow: none; top: auto; vertical-align: baseline; width: auto; word-break: normal;">;</code></div><div class="line number8 index7 alt1" style="background: 0px 0px rgb(249, 249, 249); border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: #333333; float: none; font-family: "lucida sans typewriter", "lucida console", monaco, "bitstream vera sans mono", monospace; font-size: 14px; font-variant-ligatures: common-ligatures; height: auto; left: auto; line-height: 1.42em; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 0.25em 1em; position: static; right: auto; text-shadow: none; top: auto; vertical-align: baseline; white-space: pre; width: auto; word-break: normal;"><code class="css plain" style="background: 0px 0px; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: black; float: none; font-family: "Lucida Sans Typewriter", "Lucida Console", monaco, "Bitstream Vera Sans Mono", monospace !important; height: auto; left: auto; line-height: 1.42em; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; text-shadow: none; top: auto; vertical-align: baseline; width: auto; word-break: normal;">}</code></div></div><div class="line number8 index7 alt1" style="background: 0px 0px rgb(249, 249, 249); border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: #333333; float: none; font-family: "lucida sans typewriter", "lucida console", monaco, "bitstream vera sans mono", monospace; font-size: 14px; font-variant-ligatures: common-ligatures; height: auto; left: auto; line-height: 1.42em; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 0.25em 1em; position: static; right: auto; text-shadow: none; top: auto; vertical-align: baseline; white-space: pre; width: auto; word-break: normal;"><code class="css plain" style="background: 0px 0px; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: black; float: none; font-family: "Lucida Sans Typewriter", "Lucida Console", monaco, "Bitstream Vera Sans Mono", monospace !important; height: auto; left: auto; line-height: 1.42em; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; text-shadow: none; top: auto; vertical-align: baseline; width: auto; word-break: normal;"><br /></code></div><div>LESS</div><div>Utilizamos :extend</div><div><br /></div><div><div class="line number1 index0 alt2" style="background: 0px 0px rgb(255, 255, 255); border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: #333333; float: none; font-family: "lucida sans typewriter", "lucida console", monaco, "bitstream vera sans mono", monospace; font-size: 14px; font-variant-ligatures: common-ligatures; height: auto; left: auto; line-height: 1.42em; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 0.25em 1em; position: static; right: auto; text-shadow: none; top: auto; vertical-align: baseline; white-space: pre; width: auto; word-break: normal;"><code class="css plain" style="background: 0px 0px; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: black; float: none; font-family: "Lucida Sans Typewriter", "Lucida Console", monaco, "Bitstream Vera Sans Mono", monospace !important; height: auto; left: auto; line-height: 1.42em; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; text-shadow: none; top: auto; vertical-align: baseline; width: auto; word-break: normal;">.</code><code class="css value" style="background: 0px 0px; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: #009900; float: none; font-family: "Lucida Sans Typewriter", "Lucida Console", monaco, "Bitstream Vera Sans Mono", monospace !important; height: auto; left: auto; line-height: 1.42em; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; text-shadow: none; top: auto; vertical-align: baseline; width: auto; word-break: normal;">circle</code> <code class="css plain" style="background: 0px 0px; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: black; float: none; font-family: "Lucida Sans Typewriter", "Lucida Console", monaco, "Bitstream Vera Sans Mono", monospace !important; height: auto; left: auto; line-height: 1.42em; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; text-shadow: none; top: auto; vertical-align: baseline; width: auto; word-break: normal;">{</code></div><div class="line number2 index1 alt1" style="background: 0px 0px rgb(249, 249, 249); border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: #333333; float: none; font-family: "lucida sans typewriter", "lucida console", monaco, "bitstream vera sans mono", monospace; font-size: 14px; font-variant-ligatures: common-ligatures; height: auto; left: auto; line-height: 1.42em; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 0.25em 1em; position: static; right: auto; text-shadow: none; top: auto; vertical-align: baseline; white-space: pre; width: auto; word-break: normal;"><code class="css spaces" style="background: 0px 0px; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: "Lucida Sans Typewriter", "Lucida Console", monaco, "Bitstream Vera Sans Mono", monospace !important; height: auto; left: auto; line-height: 1.42em; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; text-shadow: none; top: auto; vertical-align: baseline; width: auto; word-break: normal;"> </code><code class="css keyword" style="background: 0px 0px; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: #006699; float: none; font-family: "Lucida Sans Typewriter", "Lucida Console", monaco, "Bitstream Vera Sans Mono", monospace !important; font-weight: 700; height: auto; left: auto; line-height: 1.42em; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; text-shadow: none; top: auto; vertical-align: baseline; width: auto; word-break: normal;">border</code><code class="css plain" style="background: 0px 0px; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: black; float: none; font-family: "Lucida Sans Typewriter", "Lucida Console", monaco, "Bitstream Vera Sans Mono", monospace !important; height: auto; left: auto; line-height: 1.42em; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; text-shadow: none; top: auto; vertical-align: baseline; width: auto; word-break: normal;">: </code><code class="css value" style="background: 0px 0px; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: #009900; float: none; font-family: "Lucida Sans Typewriter", "Lucida Console", monaco, "Bitstream Vera Sans Mono", monospace !important; height: auto; left: auto; line-height: 1.42em; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; text-shadow: none; top: auto; vertical-align: baseline; width: auto; word-break: normal;">1px</code> <code class="css value" style="background: 0px 0px; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: #009900; float: none; font-family: "Lucida Sans Typewriter", "Lucida Console", monaco, "Bitstream Vera Sans Mono", monospace !important; height: auto; left: auto; line-height: 1.42em; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; text-shadow: none; top: auto; vertical-align: baseline; width: auto; word-break: normal;">solid</code> <code class="css value" style="background: 0px 0px; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: #009900; float: none; font-family: "Lucida Sans Typewriter", "Lucida Console", monaco, "Bitstream Vera Sans Mono", monospace !important; height: auto; left: auto; line-height: 1.42em; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; text-shadow: none; top: auto; vertical-align: baseline; width: auto; word-break: normal;">#ccc</code><code class="css plain" style="background: 0px 0px; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: black; float: none; font-family: "Lucida Sans Typewriter", "Lucida Console", monaco, "Bitstream Vera Sans Mono", monospace !important; height: auto; left: auto; line-height: 1.42em; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; text-shadow: none; top: auto; vertical-align: baseline; width: auto; word-break: normal;">;</code></div><div class="line number3 index2 alt2" style="background: 0px 0px rgb(255, 255, 255); border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: #333333; float: none; font-family: "lucida sans typewriter", "lucida console", monaco, "bitstream vera sans mono", monospace; font-size: 14px; font-variant-ligatures: common-ligatures; height: auto; left: auto; line-height: 1.42em; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 0.25em 1em; position: static; right: auto; text-shadow: none; top: auto; vertical-align: baseline; white-space: pre; width: auto; word-break: normal;"><code class="css spaces" style="background: 0px 0px; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: "Lucida Sans Typewriter", "Lucida Console", monaco, "Bitstream Vera Sans Mono", monospace !important; height: auto; left: auto; line-height: 1.42em; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; text-shadow: none; top: auto; vertical-align: baseline; width: auto; word-break: normal;"> </code><code class="css plain" style="background: 0px 0px; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: black; float: none; font-family: "Lucida Sans Typewriter", "Lucida Console", monaco, "Bitstream Vera Sans Mono", monospace !important; height: auto; left: auto; line-height: 1.42em; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; text-shadow: none; top: auto; vertical-align: baseline; width: auto; word-break: normal;">border-radius: </code><code class="css value" style="background: 0px 0px; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: #009900; float: none; font-family: "Lucida Sans Typewriter", "Lucida Console", monaco, "Bitstream Vera Sans Mono", monospace !important; height: auto; left: auto; line-height: 1.42em; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; text-shadow: none; top: auto; vertical-align: baseline; width: auto; word-break: normal;">50px</code><code class="css plain" style="background: 0px 0px; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: black; float: none; font-family: "Lucida Sans Typewriter", "Lucida Console", monaco, "Bitstream Vera Sans Mono", monospace !important; height: auto; left: auto; line-height: 1.42em; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; text-shadow: none; top: auto; vertical-align: baseline; width: auto; word-break: normal;">;</code></div><div class="line number4 index3 alt1" style="background: 0px 0px rgb(249, 249, 249); border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: #333333; float: none; font-family: "lucida sans typewriter", "lucida console", monaco, "bitstream vera sans mono", monospace; font-size: 14px; font-variant-ligatures: common-ligatures; height: auto; left: auto; line-height: 1.42em; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 0.25em 1em; position: static; right: auto; text-shadow: none; top: auto; vertical-align: baseline; white-space: pre; width: auto; word-break: normal;"><code class="css spaces" style="background: 0px 0px; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: "Lucida Sans Typewriter", "Lucida Console", monaco, "Bitstream Vera Sans Mono", monospace !important; height: auto; left: auto; line-height: 1.42em; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; text-shadow: none; top: auto; vertical-align: baseline; width: auto; word-break: normal;"> </code><code class="css keyword" style="background: 0px 0px; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: #006699; float: none; font-family: "Lucida Sans Typewriter", "Lucida Console", monaco, "Bitstream Vera Sans Mono", monospace !important; font-weight: 700; height: auto; left: auto; line-height: 1.42em; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; text-shadow: none; top: auto; vertical-align: baseline; width: auto; word-break: normal;">overflow</code><code class="css plain" style="background: 0px 0px; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: black; float: none; font-family: "Lucida Sans Typewriter", "Lucida Console", monaco, "Bitstream Vera Sans Mono", monospace !important; height: auto; left: auto; line-height: 1.42em; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; text-shadow: none; top: auto; vertical-align: baseline; width: auto; word-break: normal;">: </code><code class="css value" style="background: 0px 0px; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: #009900; float: none; font-family: "Lucida Sans Typewriter", "Lucida Console", monaco, "Bitstream Vera Sans Mono", monospace !important; height: auto; left: auto; line-height: 1.42em; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; text-shadow: none; top: auto; vertical-align: baseline; width: auto; word-break: normal;">hidden</code><code class="css plain" style="background: 0px 0px; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: black; float: none; font-family: "Lucida Sans Typewriter", "Lucida Console", monaco, "Bitstream Vera Sans Mono", monospace !important; height: auto; left: auto; line-height: 1.42em; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; text-shadow: none; top: auto; vertical-align: baseline; width: auto; word-break: normal;">;</code></div><div class="line number5 index4 alt2" style="background: 0px 0px rgb(255, 255, 255); border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: #333333; float: none; font-family: "lucida sans typewriter", "lucida console", monaco, "bitstream vera sans mono", monospace; font-size: 14px; font-variant-ligatures: common-ligatures; height: auto; left: auto; line-height: 1.42em; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 0.25em 1em; position: static; right: auto; text-shadow: none; top: auto; vertical-align: baseline; white-space: pre; width: auto; word-break: normal;"><code class="css plain" style="background: 0px 0px; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: black; float: none; font-family: "Lucida Sans Typewriter", "Lucida Console", monaco, "Bitstream Vera Sans Mono", monospace !important; height: auto; left: auto; line-height: 1.42em; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; text-shadow: none; top: auto; vertical-align: baseline; width: auto; word-break: normal;">}</code></div><div class="line number6 index5 alt1" style="background: 0px 0px rgb(249, 249, 249); border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: #333333; float: none; font-family: "lucida sans typewriter", "lucida console", monaco, "bitstream vera sans mono", monospace; font-size: 14px; font-variant-ligatures: common-ligatures; height: auto; left: auto; line-height: 1.42em; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 0.25em 1em; position: static; right: auto; text-shadow: none; top: auto; vertical-align: baseline; white-space: pre; width: auto; word-break: normal;"> </div><div class="line number7 index6 alt2" style="background: 0px 0px rgb(255, 255, 255); border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: #333333; float: none; font-family: "lucida sans typewriter", "lucida console", monaco, "bitstream vera sans mono", monospace; font-size: 14px; font-variant-ligatures: common-ligatures; height: auto; left: auto; line-height: 1.42em; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 0.25em 1em; position: static; right: auto; text-shadow: none; top: auto; vertical-align: baseline; white-space: pre; width: auto; word-break: normal;"><code class="css plain" style="background: 0px 0px; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: black; float: none; font-family: "Lucida Sans Typewriter", "Lucida Console", monaco, "Bitstream Vera Sans Mono", monospace !important; height: auto; left: auto; line-height: 1.42em; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; text-shadow: none; top: auto; vertical-align: baseline; width: auto; word-break: normal;">.avatar:extend(.</code><code class="css value" style="background: 0px 0px; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: #009900; float: none; font-family: "Lucida Sans Typewriter", "Lucida Console", monaco, "Bitstream Vera Sans Mono", monospace !important; height: auto; left: auto; line-height: 1.42em; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; text-shadow: none; top: auto; vertical-align: baseline; width: auto; word-break: normal;">circle</code><code class="css plain" style="background: 0px 0px; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: black; float: none; font-family: "Lucida Sans Typewriter", "Lucida Console", monaco, "Bitstream Vera Sans Mono", monospace !important; height: auto; left: auto; line-height: 1.42em; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; text-shadow: none; top: auto; vertical-align: baseline; width: auto; word-break: normal;">) {}</code></div></div><div><br /></div><div><b>5. Error Handling</b></div><div>La notificación de errores también es un factor importante para facilitar la depuración del código.</div><div><br /></div><div>SASS</div><div>Sass introduce nuevas directivas: @error, @warn and @debug.</div><div><br /></div><div>La directiva @error y @warn te permite lanzar un mensaje de error personalizado. Esta característica adicional es genial si estás creando un sistema de diseño o un marco de trabajo basado en Sass, por ejemplo. Querrás que arroje un mensaje si están usando un mixin depreciado o cuando pasen un valor correcto, por ejemplo:</div><div><br /></div><div><div class="line number1 index0 alt2" style="background: 0px 0px rgb(255, 255, 255); border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: #333333; float: none; font-family: "lucida sans typewriter", "lucida console", monaco, "bitstream vera sans mono", monospace; font-size: 14px; font-variant-ligatures: common-ligatures; height: auto; left: auto; line-height: 1.42em; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 0.25em 1em; position: static; right: auto; text-shadow: none; top: auto; vertical-align: baseline; white-space: pre; width: auto; word-break: normal;"><code class="css plain" style="background: 0px 0px; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: black; float: none; font-family: "Lucida Sans Typewriter", "Lucida Console", monaco, "Bitstream Vera Sans Mono", monospace !important; height: auto; left: auto; line-height: 1.42em; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; text-shadow: none; top: auto; vertical-align: baseline; width: auto; word-break: normal;">@mixin border-radius( $rad ) {</code></div><div class="line number2 index1 alt1" style="background: 0px 0px rgb(249, 249, 249); border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: #333333; float: none; font-family: "lucida sans typewriter", "lucida console", monaco, "bitstream vera sans mono", monospace; font-size: 14px; font-variant-ligatures: common-ligatures; height: auto; left: auto; line-height: 1.42em; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 0.25em 1em; position: static; right: auto; text-shadow: none; top: auto; vertical-align: baseline; white-space: pre; width: auto; word-break: normal;"><code class="css spaces" style="background: 0px 0px; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: "Lucida Sans Typewriter", "Lucida Console", monaco, "Bitstream Vera Sans Mono", monospace !important; height: auto; left: auto; line-height: 1.42em; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; text-shadow: none; top: auto; vertical-align: baseline; width: auto; word-break: normal;"> </code><code class="css plain" style="background: 0px 0px; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: black; float: none; font-family: "Lucida Sans Typewriter", "Lucida Console", monaco, "Bitstream Vera Sans Mono", monospace !important; height: auto; left: auto; line-height: 1.42em; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; text-shadow: none; top: auto; vertical-align: baseline; width: auto; word-break: normal;">@warn </code><code class="css string" style="background: 0px 0px; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: blue; float: none; font-family: "Lucida Sans Typewriter", "Lucida Console", monaco, "Bitstream Vera Sans Mono", monospace !important; height: auto; left: auto; line-height: 1.42em; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; text-shadow: none; top: auto; vertical-align: baseline; width: auto; word-break: normal;">"The `border-radius()` </code></div><div class="line number2 index1 alt1" style="background: 0px 0px rgb(249, 249, 249); border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: #333333; float: none; font-family: "lucida sans typewriter", "lucida console", monaco, "bitstream vera sans mono", monospace; font-size: 14px; font-variant-ligatures: common-ligatures; height: auto; left: auto; line-height: 1.42em; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 0.25em 1em; position: static; right: auto; text-shadow: none; top: auto; vertical-align: baseline; white-space: pre; width: auto; word-break: normal;"><code class="css string" style="background: 0px 0px; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: blue; float: none; font-family: "Lucida Sans Typewriter", "Lucida Console", monaco, "Bitstream Vera Sans Mono", monospace !important; height: auto; left: auto; line-height: 1.42em; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; text-shadow: none; top: auto; vertical-align: baseline; width: auto; word-break: normal;">mixin will be deprecated in version 5.2, </code></div><div class="line number2 index1 alt1" style="background: 0px 0px rgb(249, 249, 249); border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: #333333; float: none; font-family: "lucida sans typewriter", "lucida console", monaco, "bitstream vera sans mono", monospace; font-size: 14px; font-variant-ligatures: common-ligatures; height: auto; left: auto; line-height: 1.42em; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 0.25em 1em; position: static; right: auto; text-shadow: none; top: auto; vertical-align: baseline; white-space: pre; width: auto; word-break: normal;"><code class="css string" style="background: 0px 0px; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: blue; float: none; font-family: "Lucida Sans Typewriter", "Lucida Console", monaco, "Bitstream Vera Sans Mono", monospace !important; height: auto; left: auto; line-height: 1.42em; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; text-shadow: none; top: auto; vertical-align: baseline; width: auto; word-break: normal;">use `corner-radius()` mixin instead"</code><code class="css plain" style="background: 0px 0px; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: black; float: none; font-family: "Lucida Sans Typewriter", "Lucida Console", monaco, "Bitstream Vera Sans Mono", monospace !important; height: auto; left: auto; line-height: 1.42em; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; text-shadow: none; top: auto; vertical-align: baseline; width: auto; word-break: normal;">;</code></div><div class="line number3 index2 alt2" style="background: 0px 0px rgb(255, 255, 255); border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: #333333; float: none; font-family: "lucida sans typewriter", "lucida console", monaco, "bitstream vera sans mono", monospace; font-size: 14px; font-variant-ligatures: common-ligatures; height: auto; left: auto; line-height: 1.42em; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 0.25em 1em; position: static; right: auto; text-shadow: none; top: auto; vertical-align: baseline; white-space: pre; width: auto; word-break: normal;"><code class="css spaces" style="background: 0px 0px; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: "Lucida Sans Typewriter", "Lucida Console", monaco, "Bitstream Vera Sans Mono", monospace !important; height: auto; left: auto; line-height: 1.42em; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; text-shadow: none; top: auto; vertical-align: baseline; width: auto; word-break: normal;"> </code><code class="css plain" style="background: 0px 0px; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: black; float: none; font-family: "Lucida Sans Typewriter", "Lucida Console", monaco, "Bitstream Vera Sans Mono", monospace !important; height: auto; left: auto; line-height: 1.42em; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; text-shadow: none; top: auto; vertical-align: baseline; width: auto; word-break: normal;">border-radius: $rad;</code></div><div class="line number4 index3 alt1" style="background: 0px 0px rgb(249, 249, 249); border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: #333333; float: none; font-family: "lucida sans typewriter", "lucida console", monaco, "bitstream vera sans mono", monospace; font-size: 14px; font-variant-ligatures: common-ligatures; height: auto; left: auto; line-height: 1.42em; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 0.25em 1em; position: static; right: auto; text-shadow: none; top: auto; vertical-align: baseline; white-space: pre; width: auto; word-break: normal;"><code class="css plain" style="background: 0px 0px; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: black; float: none; font-family: "Lucida Sans Typewriter", "Lucida Console", monaco, "Bitstream Vera Sans Mono", monospace !important; height: auto; left: auto; line-height: 1.42em; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; text-shadow: none; top: auto; vertical-align: baseline; width: auto; word-break: normal;">}</code></div></div><div class="line number4 index3 alt1" style="background: 0px 0px rgb(249, 249, 249); border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: #333333; float: none; font-family: "lucida sans typewriter", "lucida console", monaco, "bitstream vera sans mono", monospace; font-size: 14px; font-variant-ligatures: common-ligatures; height: auto; left: auto; line-height: 1.42em; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 0.25em 1em; position: static; right: auto; text-shadow: none; top: auto; vertical-align: baseline; white-space: pre; width: auto; word-break: normal;"><code class="css plain" style="background: 0px 0px; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: black; float: none; font-family: "Lucida Sans Typewriter", "Lucida Console", monaco, "Bitstream Vera Sans Mono", monospace !important; height: auto; left: auto; line-height: 1.42em; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; text-shadow: none; top: auto; vertical-align: baseline; width: auto; word-break: normal;"><br /></code></div><div>La directiva @debug funciona de forma similar al console.log() en JavaScript, por ejemplo:</div><div><br /></div><div><div class="line number1 index0 alt2" style="background: 0px 0px rgb(255, 255, 255); border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: #333333; float: none; font-family: "lucida sans typewriter", "lucida console", monaco, "bitstream vera sans mono", monospace; font-size: 14px; font-variant-ligatures: common-ligatures; height: auto; left: auto; line-height: 1.42em; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 0.25em 1em; position: static; right: auto; text-shadow: none; top: auto; vertical-align: baseline; white-space: pre; width: auto; word-break: normal;"><code class="css plain" style="background: 0px 0px; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: black; float: none; font-family: "Lucida Sans Typewriter", "Lucida Console", monaco, "Bitstream Vera Sans Mono", monospace !important; height: auto; left: auto; line-height: 1.42em; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; text-shadow: none; top: auto; vertical-align: baseline; width: auto; word-break: normal;">$space: </code><code class="css value" style="background: 0px 0px; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: #009900; float: none; font-family: "Lucida Sans Typewriter", "Lucida Console", monaco, "Bitstream Vera Sans Mono", monospace !important; height: auto; left: auto; line-height: 1.42em; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; text-shadow: none; top: auto; vertical-align: baseline; width: auto; word-break: normal;">10px</code><code class="css plain" style="background: 0px 0px; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: black; float: none; font-family: "Lucida Sans Typewriter", "Lucida Console", monaco, "Bitstream Vera Sans Mono", monospace !important; height: auto; left: auto; line-height: 1.42em; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; text-shadow: none; top: auto; vertical-align: baseline; width: auto; word-break: normal;">;</code></div><div class="line number2 index1 alt1" style="background: 0px 0px rgb(249, 249, 249); border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: #333333; float: none; font-family: "lucida sans typewriter", "lucida console", monaco, "bitstream vera sans mono", monospace; font-size: 14px; font-variant-ligatures: common-ligatures; height: auto; left: auto; line-height: 1.42em; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 0.25em 1em; position: static; right: auto; text-shadow: none; top: auto; vertical-align: baseline; white-space: pre; width: auto; word-break: normal;"><code class="css plain" style="background: 0px 0px; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: black; float: none; font-family: "Lucida Sans Typewriter", "Lucida Console", monaco, "Bitstream Vera Sans Mono", monospace !important; height: auto; left: auto; line-height: 1.42em; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; text-shadow: none; top: auto; vertical-align: baseline; width: auto; word-break: normal;">div {</code></div><div class="line number3 index2 alt2" style="background: 0px 0px rgb(255, 255, 255); border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: #333333; float: none; font-family: "lucida sans typewriter", "lucida console", monaco, "bitstream vera sans mono", monospace; font-size: 14px; font-variant-ligatures: common-ligatures; height: auto; left: auto; line-height: 1.42em; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 0.25em 1em; position: static; right: auto; text-shadow: none; top: auto; vertical-align: baseline; white-space: pre; width: auto; word-break: normal;"><code class="css spaces" style="background: 0px 0px; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: "Lucida Sans Typewriter", "Lucida Console", monaco, "Bitstream Vera Sans Mono", monospace !important; height: auto; left: auto; line-height: 1.42em; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; text-shadow: none; top: auto; vertical-align: baseline; width: auto; word-break: normal;"> </code><code class="css plain" style="background: 0px 0px; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: black; float: none; font-family: "Lucida Sans Typewriter", "Lucida Console", monaco, "Bitstream Vera Sans Mono", monospace !important; height: auto; left: auto; line-height: 1.42em; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; text-shadow: none; top: auto; vertical-align: baseline; width: auto; word-break: normal;">@debug $space;</code></div><div class="line number4 index3 alt1" style="background: 0px 0px rgb(249, 249, 249); border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: #333333; float: none; font-family: "lucida sans typewriter", "lucida console", monaco, "bitstream vera sans mono", monospace; font-size: 14px; font-variant-ligatures: common-ligatures; height: auto; left: auto; line-height: 1.42em; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 0.25em 1em; position: static; right: auto; text-shadow: none; top: auto; vertical-align: baseline; white-space: pre; width: auto; word-break: normal;"><code class="css spaces" style="background: 0px 0px; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: "Lucida Sans Typewriter", "Lucida Console", monaco, "Bitstream Vera Sans Mono", monospace !important; height: auto; left: auto; line-height: 1.42em; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; text-shadow: none; top: auto; vertical-align: baseline; width: auto; word-break: normal;"> </code><code class="css keyword" style="background: 0px 0px; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: #006699; float: none; font-family: "Lucida Sans Typewriter", "Lucida Console", monaco, "Bitstream Vera Sans Mono", monospace !important; font-weight: 700; height: auto; left: auto; line-height: 1.42em; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; text-shadow: none; top: auto; vertical-align: baseline; width: auto; word-break: normal;">margin</code><code class="css plain" style="background: 0px 0px; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: black; float: none; font-family: "Lucida Sans Typewriter", "Lucida Console", monaco, "Bitstream Vera Sans Mono", monospace !important; height: auto; left: auto; line-height: 1.42em; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; text-shadow: none; top: auto; vertical-align: baseline; width: auto; word-break: normal;">: ($spaces * </code><code class="css value" style="background: 0px 0px; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: #009900; float: none; font-family: "Lucida Sans Typewriter", "Lucida Console", monaco, "Bitstream Vera Sans Mono", monospace !important; height: auto; left: auto; line-height: 1.42em; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; text-shadow: none; top: auto; vertical-align: baseline; width: auto; word-break: normal;">2</code><code class="css plain" style="background: 0px 0px; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: black; float: none; font-family: "Lucida Sans Typewriter", "Lucida Console", monaco, "Bitstream Vera Sans Mono", monospace !important; height: auto; left: auto; line-height: 1.42em; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; text-shadow: none; top: auto; vertical-align: baseline; width: auto; word-break: normal;">);</code></div><div class="line number5 index4 alt2" style="background: 0px 0px rgb(255, 255, 255); border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: #333333; float: none; font-family: "lucida sans typewriter", "lucida console", monaco, "bitstream vera sans mono", monospace; font-size: 14px; font-variant-ligatures: common-ligatures; height: auto; left: auto; line-height: 1.42em; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 0.25em 1em; position: static; right: auto; text-shadow: none; top: auto; vertical-align: baseline; white-space: pre; width: auto; word-break: normal;"><code class="css plain" style="background: 0px 0px; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: black; float: none; font-family: "Lucida Sans Typewriter", "Lucida Console", monaco, "Bitstream Vera Sans Mono", monospace !important; height: auto; left: auto; line-height: 1.42em; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; text-shadow: none; top: auto; vertical-align: baseline; width: auto; word-break: normal;">}</code></div></div><div class="line number5 index4 alt2" style="background: 0px 0px rgb(255, 255, 255); border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: #333333; float: none; font-family: "lucida sans typewriter", "lucida console", monaco, "bitstream vera sans mono", monospace; font-size: 14px; font-variant-ligatures: common-ligatures; height: auto; left: auto; line-height: 1.42em; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 0.25em 1em; position: static; right: auto; text-shadow: none; top: auto; vertical-align: baseline; white-space: pre; width: auto; word-break: normal;"><code class="css plain" style="background: 0px 0px; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: black; float: none; font-family: "Lucida Sans Typewriter", "Lucida Console", monaco, "Bitstream Vera Sans Mono", monospace !important; height: auto; left: auto; line-height: 1.42em; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; text-shadow: none; top: auto; vertical-align: baseline; width: auto; word-break: normal;"><br /></code></div><div>LESS</div><div>No proporciona una directiva especial para manejar errores personalizados como Sass.</div><div><br /></div><div><b><font size="4">More references</font></b></div><div><b><font size="4"><br /></font></b></div><div>If you want to learn more about SASS, I recommend you this eBook: <a href="https://marksheet.io/sass.html" style="background-color: #ba67c8;" target="_blank"><font size="4">https://marksheet.io/sass.html</font></a></div><div>If you want to discover more about the differences between sass and less, you can check: <a href="https://css-tricks.com/sass-vs-less/" target="_blank"><font size="4" style="background-color: #e67c73;">https://css-tricks.com/sass-vs-less/</font></a></div>Lizzy Mendivilhttp://www.blogger.com/profile/17037414623539252518noreply@blogger.com0tag:blogger.com,1999:blog-2681976894309771219.post-20401726146211612662020-04-06T10:16:00.000-04:002020-04-06T11:19:45.270-04:00Import line spacing - Angular / React<div style="text-align: justify;">
Una de las buenas prácticas que considero que hacen lucir un código limpio es el *import line spacing* o una línea de separación entre los tipos de imports que hacés al inicio de tu código.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Podemos dividir los imports en al menos dos categorías: third party imports y application imports (o sea, las libraries de terceros y los imports de nuestra propia aplicación)</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
De igual forma, mantener un orden alfabético por módulo así como también los destructured imported.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Pero, ¿por qué? Así separamos visualmente lo que tiene que ver con ellos (third-party) con lo nuestro.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Y el orden alfabético nos ayuda a tener una mejor legibilidad y localizar fácilmente los símbolos.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Por otra parte, también nos puede servir de una métrica para saber si estamos haciendo mucho código en un archivo. O sea, por ejemplo, si ves que tenés más de 5 imports en el primer grupo o en el segundo grupo, podés usarlo de parámetros para reconsiderar y tratar de refactorizar tu código.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
This is an example of a angular file: </div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<b>Esto es lo que debes evitar:</b></div>
<div style="text-align: justify;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhASCNB6WlLfUXmyf7cbzjekkZF1HiM8VwO9oZsf9pOGwJER2iF3ms4n5oC7EINgJye2wMsXSJ28D7QGGcUK5_ZUztF_A_GQDnGvvtGErDgopHfU0ELX2zSfSIcH-RIhp95JKtEQkZ7Kog/s1600/avoid-import-not-line-spacing.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="522" data-original-width="1582" height="131" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhASCNB6WlLfUXmyf7cbzjekkZF1HiM8VwO9oZsf9pOGwJER2iF3ms4n5oC7EINgJye2wMsXSJ28D7QGGcUK5_ZUztF_A_GQDnGvvtGErDgopHfU0ELX2zSfSIcH-RIhp95JKtEQkZ7Kog/s400/avoid-import-not-line-spacing.png" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<b>Aquí estamos siguiendo la buena práctica:
</b><br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQqxMNCo95NnxccxR2gN9pIU-whSGoVPkBVCNZg5xmbATyrXEr4Bz5zprYwYYQnEKsbb1BnEETZlTV8f48dCVXmH5xTSTTGj-T3KcSDroNfiUF9s77aI60asIujuKAFrd5w_BAGK9slbk/s1600/import-line-spacing.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="558" data-original-width="1582" height="140" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQqxMNCo95NnxccxR2gN9pIU-whSGoVPkBVCNZg5xmbATyrXEr4Bz5zprYwYYQnEKsbb1BnEETZlTV8f48dCVXmH5xTSTTGj-T3KcSDroNfiUF9s77aI60asIujuKAFrd5w_BAGK9slbk/s400/import-line-spacing.png" width="400" /></a></div>
<div style="text-align: justify;">
<br /></div>
<span style="font-size: x-small;"><b>Source 1</b>: <a href="https://v2.angular.io/docs/ts/latest/guide/style-guide.html#!#03-06" target="_blank">https://v2.angular.io/docs/ts/latest/guide/style-guide.html#!#03-06</a> </span><br />
<span style="font-size: x-small;"><b>Source 2:</b> <a href="https://dev.to/jorgealvarez/react-imports-the-rule-of-5-ji3">https://dev.to/jorgealvarez/react-imports-the-rule-of-5-ji3</a></span><br />
<br />Lizzy Mendivilhttp://www.blogger.com/profile/17037414623539252518noreply@blogger.com0tag:blogger.com,1999:blog-2681976894309771219.post-50507756767199037752020-02-18T13:06:00.002-04:002020-02-18T13:06:46.369-04:00ESLint + MochaHi, you are working with Mocha and ESLint is telling you there is a problem and the problem looks like this:<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhY6aKIvZQYMdy_x2x_NUvSWkzWaeeyhptw2b9Iq4ZnJQ1hciSzhef6c30abX4tDuqZi1Kqv9CanwBGbAQGmf9bZGQ-RtztnLXZAJqafKXuKzB3gEnTe950dXpL7FCYpn2sT2VgIumKz0A/s1600/describe-is-not-defined-mocha-eslint.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="290" data-original-width="682" height="136" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhY6aKIvZQYMdy_x2x_NUvSWkzWaeeyhptw2b9Iq4ZnJQ1hciSzhef6c30abX4tDuqZi1Kqv9CanwBGbAQGmf9bZGQ-RtztnLXZAJqafKXuKzB3gEnTe950dXpL7FCYpn2sT2VgIumKz0A/s320/describe-is-not-defined-mocha-eslint.png" width="320" /></a></div>
<br />
<br />
<span style="background-color: #252526; color: #cccccc; font-family: "consolas" , "courier new" , monospace; font-size: 14px; white-space: pre-wrap;">'describe' is not defined.</span><span style="background-color: #252526; color: #cccccc; font-family: "consolas" , "courier new" , monospace; font-size: 14px; opacity: 0.6; padding-left: 6px;">eslint(no-undef)</span><br />
<br />
It easy to solve it. Go .eslintrc.json and add the following line ("mocha": true):<br />
<br />
<div style="background-color: #1e1e1e; color: #d4d4d4; font-family: Consolas, "Courier New", monospace; font-size: 14px; line-height: 19px; white-space: pre;">
<div>
<span style="color: #9cdcfe;">"env"</span>: {</div>
<div>
<span style="color: #9cdcfe;">"browser"</span>: <span style="color: #569cd6;">true</span>,</div>
<div>
<span style="color: #9cdcfe;">"es6"</span>: <span style="color: #569cd6;">true</span>,</div>
<div>
<span style="color: #9cdcfe;">"node"</span>: <span style="color: #569cd6;">true</span>,</div>
<div>
<span style="color: #9cdcfe;">"mocha"</span>: <span style="color: #569cd6;">true</span></div>
<div>
},</div>
</div>
<br />
Happy testing!Lizzy Mendivilhttp://www.blogger.com/profile/17037414623539252518noreply@blogger.com0tag:blogger.com,1999:blog-2681976894309771219.post-60880406020948372102020-01-29T12:37:00.000-04:002020-01-29T12:37:20.131-04:00How to open VS Code user settings as JSONWhen I was reading about Prettier and ESLint and how to set up in VS Code I realized I can open VS Code User's settings/preferences as both: UI and JSON. I really didn't know how to do it. I mean, I used to use as UI only. Today, if you are like me, I will teach you how to open as JSON and put your configuration required.<br />
<br />
Open you VS Code<br />
If you are using Windows...<br />
Press CTRL + Shift + P<br />
Search for "Settings"<br />
Click con Workbench>Settings Editor<br />
Choose json option in dropdownlist<br />
<br />
Then, check "Controls whether to use the split JSON editor when editing settings a JSON"<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNJaEjvbgp2ZTxyvNgw7SjXxAj49bUoKUypzLvEYua-FOvyEWQ4ciQwWhrATX5v3HBVBY_cLJq6cWo9ipuFIHNcLHk17FpGUVx2oavhF8sbGu60Bw-zeWHiGEYpcs-IODmLGTiG5Ph_pI/s1600/VS+Code+User+Settings.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="948" data-original-width="1202" height="315" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNJaEjvbgp2ZTxyvNgw7SjXxAj49bUoKUypzLvEYua-FOvyEWQ4ciQwWhrATX5v3HBVBY_cLJq6cWo9ipuFIHNcLHk17FpGUVx2oavhF8sbGu60Bw-zeWHiGEYpcs-IODmLGTiG5Ph_pI/s400/VS+Code+User+Settings.png" width="400" /></a></div>
<br />
<br />
<br />
And voilà!<br />
<br />
Happy formatting :)Lizzy Mendivilhttp://www.blogger.com/profile/17037414623539252518noreply@blogger.com0tag:blogger.com,1999:blog-2681976894309771219.post-19195200863319106502019-10-17T18:10:00.001-04:002019-10-17T18:10:43.284-04:00Cómo insertar un ObjectId customizado en MongoDBComo sabrás, cuando haces un insert, mongo genera el _id automáticamente, este _id viene a ser la "primary key" de tu documento. Sin embargo, si querés agregar un ObjectId personalizado, tenés que tener cuidado de seguir el length o tamaño requerido de un ObjectId que es de 24. Aquí te dejo un ejemplo.<br />
<br />
Happy coding!<br />
<script src="https://gist.github.com/lizzymendivil/0cca98545a21e834fff1308a808bf1b6.js"></script>Lizzy Mendivilhttp://www.blogger.com/profile/17037414623539252518noreply@blogger.com0tag:blogger.com,1999:blog-2681976894309771219.post-42347021427507579792019-05-17T09:00:00.000-04:002019-05-17T09:00:02.054-04:00¿Qué es Git LFS y cómo implementarlo?LFS significa <b>Large File Storage </b>o en español <b>Almacenamiento de archivos grandes.</b><div>
<br /></div>
<div>
Pero, ¿qué es lo que hace realmente?</div>
<div>
<br /></div>
<div style="text-align: justify;">
Resulta que cuando versionamos código, éstos suelen ser planos, simples archivos que si lo pesamos, no representan un peso significativo. Y cuando hacemos push al servidor remoto, git crea una copia con los cambios y hasta ahí todo perfecto. Pero ¿qué tal si queremos versionar archivos cuyo peso puede significar un problema para nuestro repositorio? Se imaginan versionar un .dll por ejemplo.</div>
<div>
<br /></div>
<div>
Aquí es donde entra "git lfs". Veamos la siguiente imagen:</div>
<div>
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHwlYeFT_SQN6ZAD7vcdQ4kfjoG3jf3mQiI2KpeytkcsXLzuPNK7XrBdRlk5v-LqAy8MLpdbbCPu_3Q5qq7o0xw8XioqDRUBtPmuXRsfdkg3nYVYnTCs-hoNJR3C5bp-J4tPgxIbxYZrI/s1600/git-lfs.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="461" data-original-width="731" height="251" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHwlYeFT_SQN6ZAD7vcdQ4kfjoG3jf3mQiI2KpeytkcsXLzuPNK7XrBdRlk5v-LqAy8MLpdbbCPu_3Q5qq7o0xw8XioqDRUBtPmuXRsfdkg3nYVYnTCs-hoNJR3C5bp-J4tPgxIbxYZrI/s400/git-lfs.png" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
Cuando usamos git lfs, los archivos grandes no se suben al respositorio remoto sino unicamente se crea un acceso directo cuyo peso comparado con el archivo real será de bastante consideración.</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
<b><u>Cómo implementar git lfs</u></b></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
1. Descarga e Instala <a href="https://git-lfs.github.com/">https://git-lfs.github.com/</a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div>
2. Crea e incializa tu repositorio</div>
<div>
<br /></div>
<div>
3. Ejecuta git lfs install</div>
<div>
<br /></div>
<div>
4. Selecciona los typos de archivos que quisieras que Git LFS administre:</div>
<div>
<br /></div>
<div>
git lfs track "*.psd, *.dll" </div>
<div>
<br /></div>
<div>
5. Un archivo de congifuración llamado .gitattributes será modificado donde estarán todos los tipos de archivos o extensiones que hayas configurado en el paso 4. Y como tal, deberás versionarlo</div>
<div>
<br /></div>
<div>
git add .gitattributes</div>
<div>
<br /></div>
<div>
Y eso es todo!</div>
<div>
<br /></div>
<div>
Happy coding! :)</div>
<div>
<br /></div>
Lizzy Mendivilhttp://www.blogger.com/profile/17037414623539252518noreply@blogger.com0tag:blogger.com,1999:blog-2681976894309771219.post-76280276940522896062019-05-16T14:26:00.003-04:002019-05-16T14:40:35.832-04:00Input type file accepts MS presentationsIn html5, input tag has a property called accept to filter the kind of files. If we want to filter just power point files, we should do something like as follow:<br />
<br />
<br />
<script src="https://gist.github.com/lizzymendivil/58e476f7d060c51b1e248ef722622eb7.js"></script>
With this, we are filtering .ppt, pptx and ppsx<br />
<br />
But there is a trick xD<br />
Look at the next screenshot:<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhw3QpSudE-3YwcZVcsPfanuk59D58A19_zum7GJNvvmppTZyH9_xXJCYPQHo07Vg6nPD7knk3W9_k0zXTy_uRQ3wpqZJvpT-PKptQpnbpwLGwEx1L_-N2das5JTPQlcee5rG6bOA2mNM/s1600/mime-type-presentations.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="522" data-original-width="1161" height="178" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhw3QpSudE-3YwcZVcsPfanuk59D58A19_zum7GJNvvmppTZyH9_xXJCYPQHo07Vg6nPD7knk3W9_k0zXTy_uRQ3wpqZJvpT-PKptQpnbpwLGwEx1L_-N2das5JTPQlcee5rG6bOA2mNM/s400/mime-type-presentations.png" width="400" /></a></div>
<br />
<br />
Easy, right?<br />
<br />
Happy coding! :)<br />
<br />
<br />Lizzy Mendivilhttp://www.blogger.com/profile/17037414623539252518noreply@blogger.com0tag:blogger.com,1999:blog-2681976894309771219.post-45180596544490212732019-03-19T14:08:00.002-04:002019-03-20T12:24:23.768-04:00Mostrar y ocultar el valor de un input tipo password<div style="text-align: justify;">
Seguramente hay muchos approaches pero el que estoy usando yo (para AngularJS) es el que voy a compartir por aquí. La idea es dar al usuario la opción de ver lo que está escribiendo como contraseña en un formulario a través de un botón - ícono de ojo que lo pueden encontrar en este link: <a href="https://material.io/tools/icons/?style=baseline">https://material.io/tools/icons/?style=baseline</a></div>
<br />
Los nombres de íconos que estoy utilizando son: visibility y visibility_off<br />
<br />
So, let's start:<br />
<br />
<b>HTML</b><br />
<script src="https://gist.github.com/lizzymendivil/5ed510baf921dd747c210fa1aaa6839a.js"></script><br />
<br />
1. Agregamos una condicional en el type del input, de acuerdo a la condición será de tipo text o de tipo password.<br />
<br />
2. Agregamos el ícono el cual tendrá un evento click.<br />
<br />
3. El ícono será cambiado de acuerdo al flag que manejaremos desde el controller, entonces también vamos a manejar una condicional similar al punto 1.<br />
<br />
<b>CONTROLLER</b><br />
<br />
1. Agregamos la función que manejará el valor de mostrar o no mostrar la contraseña.<br />
<br />
<br />
<script src="https://gist.github.com/lizzymendivil/9de8141e4b1fb2320e77dd0e81c2889d.js"></script>
Easy, right?<br />
<br />
Happy coding!
Lizzy Mendivilhttp://www.blogger.com/profile/17037414623539252518noreply@blogger.com0tag:blogger.com,1999:blog-2681976894309771219.post-21357572501033589492019-02-13T09:12:00.002-04:002019-02-13T09:18:00.061-04:00[i18n] Implementar ngx-translate en un proyecto Angular 7Hola! Hoy te presento una forma de implementar i18n en tu proyecto Angular y esta forma es utilizando la libreria de terceros llamada *ngx-translate*<br />
<br />
Es muy sencillo, te los mostraré en 5 pasos y asumiré que ya tienes creado tu proyecto Angular:<br />
<br />
<b><u>PASO 1:</u></b> Instalar la librería en tu proyecto:<br />
<br />
<br />
<div style="text-align: center;">
<span style="font-family: "courier new" , "courier" , monospace; font-size: large;">npm install @ngx-translate/core
@ngx-translate/http-loader rxjs --save
</span></div>
<br />
<b><u><br /></u></b>
<b><u>PASO 2:</u></b> Importar ngx-translate en app.module.ts<br />
Tu app.module.ts quedaría así:<br />
<br />
<script src="https://gist.github.com/lizzymendivil/d5b14bb5db947364d8831342ccf34016.js"></script><b><u>
PASO 3:</u></b> Inyectar TranslateService en app.component.ts<br />
Tu app.component.ts quedaría así
<br />
<br />
<script src="https://gist.github.com/lizzymendivil/8be11bc8311f81487ce1899a87c38e44.js"></script>
<br />
Nota que le agregué una función que hace el switch de idioma. Podrías Llamar a esta función desde un botoncito o desde otro control.
<br />
<br />
<b><u>PASO 4:</u></b> Crear los archivos JSON por cada idioma.
<br />
Recomendación: podrías ubicar estos archivos en la siguiente ruta: assets/i18n/en.json
<br />
<br />
Un ejemplo:
<br /><br />
<script src="https://gist.github.com/lizzymendivil/7a689370d0e859409d452e1ab9c0472f.js"></script>
<br />
<b><u>PASO 5:</u></b> Editar los templates (HTML) y agregar los translate
<br />
Y como último paso, usamos los translations y tenemos dos alternativas: usando pipes o directivas. Me gusta más los pipes. Quedaría así:
<br /><br />
<script src="https://gist.github.com/lizzymendivil/67e0384a36a59955dd156e79a40f2866.js"></script>
<br />
Y voilà! Eso es todo.
<br />
<br />
Hay algunas herramientas que podrían serte de ayuda en el sitio oficial: <a href="http://www.ngx-translate.com/" target="_blank">ngx-translate.com</a>Lizzy Mendivilhttp://www.blogger.com/profile/17037414623539252518noreply@blogger.com0tag:blogger.com,1999:blog-2681976894309771219.post-67873182473431093832018-10-04T17:18:00.000-04:002018-10-04T17:18:17.041-04:00¿Cómo corregir el mensaje de un commit con GIT? *Puedes saltarte al primer subtítulo<br />
<br />
<div style="text-align: justify;">
Seguramente muchos ya han escrito sobre el comando git "amend". Seré una más que lo hace :D</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
De hecho, hace unos minutos atrás tuve que hacer uso de este valioso comando.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Estuve trabajando esta semana en un feature que terminé agregando varios archivos y modificando otros tantos más (lo sé, no fue buena práctica hacer mis commits a fin del día) Pero a mi me gusta hacer commits cuando realmente es código estable (y además presentable) Por eso únicamente los guardaba en mi equipo local.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Luego, en un notepad, escribí todos mis mensajes de commits y los files que irían a incluir cada uno. Entonces, en una de esas, copié el mensaje equivocado. <span style="background-color: orange;">¿Cómo corregir el mensaje de un commit con GIT? </span> Hoy quiero coma</div>
<div style="text-align: justify;">
<br /></div>
<b><u>GIT AMEND</u></b><br />
<br />
Aquí es precisamente donde entra el comando <span style="background-color: yellow;">git commit --amend</span><br />
<span style="background-color: yellow;"><br /></span>
Ya sea si quieres corregir el nombre de tu mensajito (sobreescribiendo o editando) o si quieres agregar un archivo o file más a tu commit, puedes usar este comando.<br />
<br />
Entonces,<br />
<br />
<span style="background-color: yellow;">git add</span> xxxxx (si quieres agregar x files)<br />
<br />
O te vas directo a ejecutar el comando amend,<br />
<br />
<span style="background-color: yellow;">git commit --amend</span><br />
<br />
(se te abrirá el editor para que cambies tu mensaje)<br />
<br />
o si quieres sobreescribir todo el mensaje<br />
<br />
<span style="background-color: yellow;">git commit --amend -m "Nuevo mensaje"</span><br />
<span style="background-color: yellow;"><br /></span>
<b><u>¿CUÁNDO FUNCIONA?</u></b><br />
<br />
Lo previamente visto te funcionará para tu último commit que no lo hayas pusheado todavía.<br />
Pero en el caso de que ya hubieras pusheado tu commit antes de corregirlo, después de corregirlo deberás ejecutar el siguiente comando:<br />
<br />
<span style="background-color: yellow;">git push -f</span><br />
<br />
<b><u>PRUEBALO</u></b><br />
<br />
Con el comando <span style="background-color: yellow;">git log</span> puedes ver que tu mensaje de commit ha sido modificado<br />
<br />
<br />
Happy Coding :)Lizzy Mendivilhttp://www.blogger.com/profile/17037414623539252518noreply@blogger.com1tag:blogger.com,1999:blog-2681976894309771219.post-74726897668242992162018-09-05T17:52:00.000-04:002018-09-17T20:29:14.886-04:00i18n for react appPara configurar internationalization en una aplicación REACT, ursaremos la librería react-intl<br />
<br />
1. Ejecutamos el siguiente comando en nuestra aplicación react para instalar la librería:<br />
<br />
<span style="background-color: #f4f4f4; color: #212529; font-family: , "menlo" , "monaco" , "consolas" , "liberation mono" , "courier new" , monospace; font-size: 14px; white-space: pre;">npm install </span><span class="hljs-comment" style="box-sizing: border-box; color: #777777; font-family: , "menlo" , "monaco" , "consolas" , "liberation mono" , "courier new" , monospace; font-size: 14px; font-style: italic; white-space: pre;">react-intl</span><br />
<span class="hljs-comment" style="box-sizing: border-box; color: #777777; font-family: , "menlo" , "monaco" , "consolas" , "liberation mono" , "courier new" , monospace; font-size: 14px; font-style: italic; white-space: pre;"><br /></span>2. Creamos los archivos json donde estarán los labels por cada idioma. Yo los creo en la siguiente ruta:<br />
<br />
src\i18n\locales\en.json<br />
src\i18n\locales\es.json<br />
<br />
<script src="https://gist.github.com/lizzymendivil/a1404f62d5d226663e0d32fbbb958c40.js"></script>
<br />
3. Modificamos el archivo index.tsx (si estas usando typescript o index.js si estás usando javascript)<br />
En este archivo haremos algunos imports, wrapearemos nuestra app (IntlProvider), y mandaremos como parámetros el idioma y de acuerdo a eso el archivo json que deberá leer. Sin tantas vueltas, debería quedar así:
<br />
<script src="https://gist.github.com/lizzymendivil/8fd9673a1f86245877e129486ba7bc83.js"></script>
4. Agregamos una función util que nos servirá para el tema de standard json notation. La función es flattenMessages:<br />
<br />
<script src="https://gist.github.com/lizzymendivil/d4ce517e7b71d3db9349f2d7a1a38de7.js"></script>
5. Utilizamos los labels traducidos:<br />
Hacemos un impor en el componente que vayamos a utilizarlo:<br />
<br />
<span style="background-color: #1e1e1e; color: grey; font-family: "consolas" , "courier new" , monospace; font-size: 14px; white-space: pre;"> <</span><span style="background-color: #1e1e1e; color: #4ec9b0; font-family: "consolas" , "courier new" , monospace; font-size: 14px; white-space: pre;">FormattedMessage</span><span style="background-color: #1e1e1e; color: #d4d4d4; font-family: "consolas" , "courier new" , monospace; font-size: 14px; white-space: pre;"> </span><span style="background-color: #1e1e1e; color: #9cdcfe; font-family: "consolas" , "courier new" , monospace; font-size: 14px; white-space: pre;">id</span><span style="background-color: #1e1e1e; color: #d4d4d4; font-family: "consolas" , "courier new" , monospace; font-size: 14px; white-space: pre;">=</span><span style="background-color: #1e1e1e; color: #ce9178; font-family: "consolas" , "courier new" , monospace; font-size: 14px; white-space: pre;">"sign.in.forgot.password"</span><span style="background-color: #1e1e1e; color: #d4d4d4; font-family: "consolas" , "courier new" , monospace; font-size: 14px; white-space: pre;"> </span><span style="background-color: #1e1e1e; color: grey; font-family: "consolas" , "courier new" , monospace; font-size: 14px; white-space: pre;">/></span><br />
<br />
Como ID nos basaremos en el JSON file que hemos estructurado previamente. También tiene otros parámetros, pero para mi caso me fue suficiente utilizar *id*<br />
<br />
<br />
<script src="https://gist.github.com/lizzymendivil/1f9ab48a94457ecee6a27b39483d7c6d.js"></script>Lizzy Mendivilhttp://www.blogger.com/profile/17037414623539252518noreply@blogger.com0tag:blogger.com,1999:blog-2681976894309771219.post-41739899691256469922018-06-22T19:40:00.000-04:002018-06-22T20:04:03.019-04:00Getting Started with MQTT and Mosca in Node.JSA modo de hacer una introducción a lo que es MQTT y MOSCA, voy a construir una aplicación sencilla que consiste en apagar o encender la luz de mi oficina.<br />
<br />
Aqui les dejo un poco de teoría para comprender mejor:<br />
<br />
<b>MQTT</b>, por sus siglas significa Message Queue Telemetry Transport. Es un protocolo usado para la comunicación Machine to Machine (M2M) donde dispositivos se comunican entre sí utilizando un patrón publisher/subscriber. Los clientes se conectan a un broker o server, estos clientes subscriben diferentes topics y cada cliente a su vez es capaz de publicar messages. Y el broker es el responsable de enviar esos messages a los clientes que previamente se subscribieron.<br />
<br />
En todo el párrafo anterior hice mención a los 4 conceptos más importantes que debes tomar en cuenta para aprender MQTT:<br />
<br />
*Publisher/Subscriber<br />
*Messages<br />
*Topics<br />
*Broker<br />
<br />
Ah, lo olvidaba, es el protocolo favorito e ideal para soluciones de Internet of Things (IoT, Internet de las Cosas) porque permite conectar un dispositivo a Internet.<br />
<br />
Bien, ahora pasemos al siguiente concepto, <b>MOSCA</b>. Desde luego, no es la mosca que conoces, ese insecto cochino que anda posandose sobre los alimentos.<br />
<br />
Recuerdas lo que era un broker? Ok, Mosca es un NodeJS MQTT Broker. Está escrito en Javascript asi que solo necesitamos NodeJS para correrlo. Entonces, conmigo vamos a crear un broker privado usando Node.JS<br />
<br />
<b><u>Assumption:</u></b><br />
Voy a suponer que ya tienes Node y NPM installado en tu máquina. Y sino, google it how to do it, it's easy!<br />
<br />
So, let's start!<br />
<br />
// Iniciando el proyecto node<br />
$mkdir mqtt-mosca-app<br />
$cd mqtt-mosca-app<br />
$npm init --y<br />
// Instalando dependencias<br />
$npm i mqtt mosca --save<br />
// espera que termine la instalación y abre el directorio con tu IDE, en mi caso Visual Studio Code<br />
$code .<br />
<br />
Creamos 3 archivos:<br />
<br />
broker.js<br />
controller.js<br />
lamp.js<br />
<br />
<span style="background-color: yellow;">// Código para broker.js</span><br />
<br />
<div style="background-color: #1e1e1e; color: #d4d4d4; font-family: Consolas, "Courier New", monospace, "Segoe UI Emoji"; font-size: 14px; line-height: 19px; white-space: pre;">
<div>
<span style="color: #569cd6;">var</span> <span style="color: #9cdcfe;">mosca</span> = <span style="color: #dcdcaa;">require</span>(<span style="color: #ce9178;">'mosca'</span>);</div>
<div>
<span style="color: #569cd6;">var</span> <span style="color: #9cdcfe;">settings</span> = {</div>
<div>
<span style="color: #9cdcfe;">port:</span><span style="color: #b5cea8;">1883</span></div>
<div>
}</div>
<br />
<div>
<span style="color: #569cd6;">var</span> <span style="color: #9cdcfe;">server</span> = <span style="color: #569cd6;">new</span> <span style="color: #4ec9b0;">mosca</span>.<span style="color: #4ec9b0;">Server</span>(<span style="color: #9cdcfe;">settings</span>);</div>
<br />
<div>
<span style="color: #9cdcfe;">server</span>.<span style="color: #dcdcaa;">on</span>(<span style="color: #ce9178;">'ready'</span>, <span style="color: #569cd6;">function</span>(){</div>
<div>
<span style="color: #4ec9b0;">console</span>.<span style="color: #dcdcaa;">log</span>(<span style="color: #ce9178;">"ready"</span>);</div>
<div>
});</div>
</div>
<br />
Requerimos el module mosca y seteamos el puerto, por defecto es el 1883. Luego se lo pasamos al servidor o broker. Activamos el broker con el evento "ready" seguido de un callback que nos imprimirá en consola que el broker está listo.<br />
<br />
<br />
<span style="background-color: yellow;">// Código para lamp.js</span><br />
Necesitamos incluir el mqtt npm library y conectarnos con nuestro broker a través de la función connect, como argumento le pasamos la URL de nuestro broker, en este caso pasa usar nuestro broker necesitas poner tu IP.<br />
<br />
Los dos estados que vamos a manejar serán: turn-on y turn-off de apagar y encender las luces. Por defecto, vamos a empezar con las luces apagadas... mmm me gusta eso XD<br />
<br />
Luego, vamos a invocar el método on(), este método toma dos parámetros: el evento connect y un callback para subscribir a un topic.<br />
<br />
Lamp se va a subscribir a dos topics, de encender y de apagar: lamp/turn-on y lamp-turn-off, también vamos a publicar que lamp está conectado y enviaremos el estado por defecto, te acuerdas? es el turn-off<br />
<br />
<div style="background-color: #1e1e1e; color: #d4d4d4; font-family: Consolas, "Courier New", monospace, "Segoe UI Emoji"; font-size: 14px; line-height: 19px; white-space: pre;">
<div>
<span style="color: #569cd6;">const</span> <span style="color: #9cdcfe;">mqtt</span> = <span style="color: #dcdcaa;">require</span>(<span style="color: #ce9178;">'mqtt'</span>);</div>
<div>
<span style="color: #569cd6;">const</span> <span style="color: #9cdcfe;">client</span> = <span style="color: #9cdcfe;">mqtt</span>.<span style="color: #dcdcaa;">connect</span>(<span style="color: #ce9178;">'mqtt://172.21.19.19'</span>);</div>
<br />
<div>
<span style="color: #608b4e;">// states: turn-on, turn-off</span></div>
<div>
<span style="color: #569cd6;">var</span> <span style="color: #9cdcfe;">state</span> = <span style="color: #ce9178;">'turn-off'</span>;</div>
<br />
<div>
<span style="color: #9cdcfe;">client</span>.<span style="color: #dcdcaa;">on</span>(<span style="color: #ce9178;">'connect'</span>, () <span style="color: #569cd6;">=></span> {</div>
<div>
<span style="color: #9cdcfe;">client</span>.<span style="color: #dcdcaa;">subscribe</span>(<span style="color: #ce9178;">'lamp/turn-on'</span>);</div>
<div>
<span style="color: #9cdcfe;">client</span>.<span style="color: #dcdcaa;">subscribe</span>(<span style="color: #ce9178;">'lamp/turn-off'</span>);</div>
<br />
<div>
<span style="color: #608b4e;">// inform controller that lamp is connected</span></div>
<div>
<span style="color: #9cdcfe;">client</span>.<span style="color: #dcdcaa;">publish</span>(<span style="color: #ce9178;">'lamp/connected'</span>, <span style="color: #ce9178;">'true'</span>);</div>
<div>
<span style="color: #dcdcaa;">sendStateUpdate</span>();</div>
<div>
});</div>
<div>
<br /></div>
<div>
<div style="line-height: 19px;">
<div>
<span style="color: #569cd6;">function</span> <span style="color: #dcdcaa;">sendStateUpdate</span>() {</div>
<div>
<span style="color: #4ec9b0;">console</span>.<span style="color: #dcdcaa;">log</span>(<span style="color: #ce9178;">'sending state = %s'</span>, <span style="color: #9cdcfe;">state</span>);</div>
<div>
<span style="color: #9cdcfe;">client</span>.<span style="color: #dcdcaa;">publish</span>(<span style="color: #ce9178;">'lamp/state'</span>, <span style="color: #9cdcfe;">state</span>);</div>
<div>
};</div>
</div>
</div>
</div>
<div style="background-color: #1e1e1e; color: #d4d4d4; font-family: Consolas, "Courier New", monospace, "Segoe UI Emoji"; font-size: 14px; line-height: 19px; white-space: pre;">
<br /></div>
<br />
Entonces, cuando nos digan que nos encendamos, tenemos que preguntar si no estamos encendidos y si es cierto, cambiamos nuestro estado. De manera parecida, cuando nos digan que nos apaguemos. Y publicamos nuestro estado actualizado. El controlador recibirá esta publicación.<br />
<br />
<div style="background-color: #1e1e1e; color: #d4d4d4; font-family: Consolas, "Courier New", monospace, "Segoe UI Emoji"; font-size: 14px; line-height: 19px; white-space: pre;">
<div>
<span style="color: #9cdcfe;">client</span>.<span style="color: #dcdcaa;">on</span>(<span style="color: #ce9178;">'message'</span>, (<span style="color: #9cdcfe;">topic</span>, <span style="color: #9cdcfe;">message</span>) <span style="color: #569cd6;">=></span> {</div>
<div>
<span style="color: #4ec9b0;">console</span>.<span style="color: #dcdcaa;">log</span>(<span style="color: #ce9178;">'received message %s = %s'</span>, <span style="color: #9cdcfe;">topic</span>, <span style="color: #9cdcfe;">message</span>);</div>
<div>
<span style="color: #c586c0;">switch</span> (<span style="color: #9cdcfe;">topic</span>) {</div>
<div>
<span style="color: #c586c0;">case</span> <span style="color: #ce9178;">'lamp/turn-on'</span>:</div>
<div>
<span style="color: #c586c0;">return</span> <span style="color: #dcdcaa;">handleTurnOnRequest</span>(<span style="color: #9cdcfe;">message</span>);</div>
<div>
<span style="color: #c586c0;">case</span> <span style="color: #ce9178;">'lamp/turn-off'</span>:</div>
<div>
<span style="color: #c586c0;">return</span> <span style="color: #dcdcaa;">handleTurnOffRequest</span>(<span style="color: #9cdcfe;">message</span>);</div>
<div>
}</div>
<div>
})</div>
<br />
<div>
<span style="color: #569cd6;">function</span> <span style="color: #dcdcaa;">handleTurnOnRequest</span>(<span style="color: #9cdcfe;">message</span>) {</div>
<div>
<span style="color: #c586c0;">if</span> (<span style="color: #9cdcfe;">state</span> !== <span style="color: #ce9178;">'turn-on'</span>) {</div>
<div>
<span style="color: #4ec9b0;">console</span>.<span style="color: #dcdcaa;">log</span>(<span style="color: #ce9178;">'turning on the lamp...'</span>);</div>
<div>
<span style="color: #608b4e;">//simulate turn on the lamp after 5 seconds</span></div>
<div>
<span style="color: #dcdcaa;">setTimeout</span>(() <span style="color: #569cd6;">=></span> {</div>
<div>
<span style="color: #9cdcfe;">state</span> = <span style="color: #ce9178;">'turn-on'</span>;</div>
<div>
<span style="color: #dcdcaa;">sendStateUpdate</span>();</div>
<div>
}, <span style="color: #b5cea8;">5000</span>);</div>
<div>
}</div>
<div>
}</div>
<br />
<div>
<span style="color: #569cd6;">function</span> <span style="color: #dcdcaa;">handleTurnOffRequest</span>(<span style="color: #9cdcfe;">message</span>) {</div>
<div>
<span style="color: #c586c0;">if</span> (<span style="color: #9cdcfe;">state</span> !== <span style="color: #ce9178;">'turn-off'</span>) {</div>
<div>
<span style="color: #4ec9b0;">console</span>.<span style="color: #dcdcaa;">log</span>(<span style="color: #ce9178;">'turning off the lamp...'</span>);</div>
<div>
<span style="color: #608b4e;">//simulate turn off the lamp after 5 seconds</span></div>
<div>
<span style="color: #dcdcaa;">setTimeout</span>(() <span style="color: #569cd6;">=></span> {</div>
<div>
<span style="color: #9cdcfe;">state</span> = <span style="color: #ce9178;">'turn-off'</span>;</div>
<div>
<span style="color: #dcdcaa;">sendStateUpdate</span>();</div>
<div>
}, <span style="color: #b5cea8;">5000</span>);</div>
<div>
}</div>
<div>
}</div>
</div>
<div style="background-color: #1e1e1e; color: #d4d4d4; font-family: Consolas, "Courier New", monospace, "Segoe UI Emoji"; font-size: 14px; line-height: 19px; white-space: pre;">
<br /></div>
<br />
<span style="background-color: yellow;">// Código para Controller.js</span><br />
<br />
Al igual que en lamp.js, necesitamos requerir el modulo mqtt y conectarnos a nuestro broker privado.<br />
<br />
Para saber si la lámpara está encendida o apagada, nos creamos una variable asi como también para saber si el equipo está conectado.<br />
<br />
Luego, invocando el método on(), y con el evento connect nos subscribimos en este caso a dos topics: lamp/connected y lamp/state ya que como contrlador, necesitamos saber si la lámpara está conectada y su estado.<br />
<br />
<div style="background-color: #1e1e1e; color: #d4d4d4; font-family: Consolas, "Courier New", monospace, "Segoe UI Emoji"; font-size: 14px; line-height: 19px; white-space: pre;">
<div>
<span style="color: #569cd6;">const</span> <span style="color: #9cdcfe;">mqtt</span> = <span style="color: #dcdcaa;">require</span>(<span style="color: #ce9178;">'mqtt'</span>);</div>
<div>
<span style="color: #569cd6;">const</span> <span style="color: #9cdcfe;">client</span> = <span style="color: #9cdcfe;">mqtt</span>.<span style="color: #dcdcaa;">connect</span>(<span style="color: #ce9178;">'mqtt://172.21.19.19'</span>);</div>
<br />
<div>
<span style="color: #569cd6;">var</span> <span style="color: #9cdcfe;">lampState</span> = <span style="color: #ce9178;">''</span>;</div>
<div>
<span style="color: #569cd6;">var</span> <span style="color: #9cdcfe;">connected</span> = <span style="color: #569cd6;">false</span>;</div>
<br />
<div>
<span style="color: #9cdcfe;">client</span>.<span style="color: #dcdcaa;">on</span>(<span style="color: #ce9178;">'connect'</span>, () <span style="color: #569cd6;">=></span> {</div>
<div>
<span style="color: #9cdcfe;">client</span>.<span style="color: #dcdcaa;">subscribe</span>(<span style="color: #ce9178;">'lamp/connected'</span>);</div>
<div>
<span style="color: #9cdcfe;">client</span>.<span style="color: #dcdcaa;">subscribe</span>(<span style="color: #ce9178;">'lamp/state'</span>);</div>
<div>
});</div>
</div>
<br />
Ahora con el evento message, empezamos a recibir los mensajes publicados a los topics que nos subscribimos. Entonces decimos que cuando la lámpara esté conectada, cambiamos el valor de nuestra variable que creamos al inicio a true o a false dependiendo del caso. Y por otro lado, cuando nos llegue el mensaje del estado de la lámpara, cambiamos el valor de nuestra variable ya sea a turn-on o turn-off dependiendo del caso.<br />
<br />
<div style="background-color: #1e1e1e; color: #d4d4d4; font-family: Consolas, "Courier New", monospace, "Segoe UI Emoji"; font-size: 14px; line-height: 19px; white-space: pre;">
<div>
<span style="color: #608b4e;">//You are supposed to receive some messages published to the topics </span><br />
<span style="color: #608b4e;">that you have subscribed to.</span></div>
<div>
<span style="color: #9cdcfe;">client</span>.<span style="color: #dcdcaa;">on</span>(<span style="color: #ce9178;">'message'</span>, (<span style="color: #9cdcfe;">topic</span>, <span style="color: #9cdcfe;">message</span>) <span style="color: #569cd6;">=></span> {</div>
<div>
<span style="color: #c586c0;">switch</span> (<span style="color: #9cdcfe;">topic</span>) {</div>
<div>
<span style="color: #c586c0;">case</span> <span style="color: #ce9178;">'lamp/connected'</span>:</div>
<div>
<span style="color: #c586c0;">return</span> <span style="color: #dcdcaa;">handleLampConnected</span>(<span style="color: #9cdcfe;">message</span>);</div>
<div>
<span style="color: #c586c0;">case</span> <span style="color: #ce9178;">'lamp/state'</span>:</div>
<div>
<span style="color: #c586c0;">return</span> <span style="color: #dcdcaa;">handleLampState</span>(<span style="color: #9cdcfe;">message</span>);</div>
<div>
}</div>
<div>
<span style="color: #4ec9b0;">console</span>.<span style="color: #dcdcaa;">log</span>(<span style="color: #ce9178;">'No handler for topic %s'</span>, <span style="color: #9cdcfe;">topic</span>)</div>
<div>
});</div>
<br />
<div>
<span style="color: #569cd6;">function</span> <span style="color: #dcdcaa;">handleLampConnected</span> (<span style="color: #9cdcfe;">message</span>) {</div>
<div>
<span style="color: #4ec9b0;">console</span>.<span style="color: #dcdcaa;">log</span>(<span style="color: #ce9178;">'lamp connected status = %s'</span>, <span style="color: #9cdcfe;">message</span>);</div>
<div>
<span style="color: #608b4e;">//The message usually arrives as buffer, so I had to </span><br />
<span style="color: #608b4e;">convert it to string data type.</span></div>
<div>
<span style="color: #9cdcfe;">connected</span> = (<span style="color: #9cdcfe;">message</span>.<span style="color: #dcdcaa;">toString</span>() === <span style="color: #ce9178;">'true'</span>); </div>
<div>
};</div>
<br />
<div>
<span style="color: #569cd6;">function</span> <span style="color: #dcdcaa;">handleLampState</span> (<span style="color: #9cdcfe;">message</span>) {</div>
<div>
<span style="color: #9cdcfe;">lampState</span> = <span style="color: #9cdcfe;">message</span>;</div>
<div>
<span style="color: #4ec9b0;">console</span>.<span style="color: #dcdcaa;">log</span>(<span style="color: #ce9178;">'lamp state update to: %s'</span>, <span style="color: #9cdcfe;">message</span>);</div>
<div>
};</div>
</div>
<br />
Y eso es todo, ahora vamos a simular ser una webapp o una mobile app que va a pedir que se encienda la luz de mi oficina y se apague. Para encender, nos aseguramos que las luces no estén encendidas y luego publicamos el topic lamp/turn-on, nuestra lámpara nos escuchará (porque ya está subscrita) y hará lo suyo. Para apagarla, lo mismo, nos aseguramos que no estén apagadas y publicamos el topic lamp/turn-off<br />
<br />
Con el ejemplo, las luces se apagarán despues de 20 segundos con el setTimeout que estamos programando.<br />
<br />
<div style="background-color: #1e1e1e; color: #d4d4d4; font-family: Consolas, "Courier New", monospace, "Segoe UI Emoji"; font-size: 14px; line-height: 19px; white-space: pre;">
<div>
<span style="color: #608b4e;">// simulating an outside input (a web app, mobile app, etc)</span></div>
<div>
<span style="color: #569cd6;">function</span> <span style="color: #dcdcaa;">turnOnLamp</span>() {</div>
<div>
<span style="color: #608b4e;">// can only turn on the lamp if we are connected to </span><br />
<span style="color: #608b4e;">mqtt and lamp is not </span><span style="color: #608b4e;">already turn on</span></div>
<div>
<span style="color: #c586c0;">if</span> (<span style="color: #9cdcfe;">connected</span> && <span style="color: #9cdcfe;">lampState</span> !== <span style="color: #ce9178;">'turn-on'</span>) {</div>
<div>
<span style="color: #608b4e;">// ask the lamp to turn on</span></div>
<div>
<span style="color: #9cdcfe;">client</span>.<span style="color: #dcdcaa;">publish</span>(<span style="color: #ce9178;">'lamp/turn-on'</span>, <span style="color: #ce9178;">'true'</span>);</div>
<div>
}</div>
<div>
}</div>
<br />
<div>
<span style="color: #569cd6;">function</span> <span style="color: #dcdcaa;">turnOffLamp</span>() {</div>
<div>
<span style="color: #608b4e;">// can only turn off the lamp if we are connected to mqtt and lamp is </span><br />
<span style="color: #608b4e;">not already turn off</span></div>
<div>
<span style="color: #c586c0;">if</span> (<span style="color: #9cdcfe;">connected</span> && <span style="color: #9cdcfe;">lampState</span> !== <span style="color: #ce9178;">'turn-off'</span>) {</div>
<div>
<span style="color: #608b4e;">//ask the lamp to turn off</span></div>
<div>
<span style="color: #9cdcfe;">client</span>.<span style="color: #dcdcaa;">publish</span>(<span style="color: #ce9178;">'lamp/turn-off'</span>, <span style="color: #ce9178;">'true'</span>);</div>
<div>
}</div>
<div>
}</div>
<br />
<div>
<span style="color: #608b4e;">// for demo purposes only</span></div>
<div>
<span style="color: #608b4e;">//simulate turning on the lamp</span></div>
<div>
<span style="color: #dcdcaa;">setTimeout</span>(() <span style="color: #569cd6;">=></span> {</div>
<div>
<span style="color: #4ec9b0;">console</span>.<span style="color: #dcdcaa;">log</span>(<span style="color: #ce9178;">'***turn on the lamp***'</span>);</div>
<div>
<span style="color: #dcdcaa;">turnOnLamp</span>();</div>
<div>
}, <span style="color: #b5cea8;">5000</span>)</div>
<br />
<div>
<span style="color: #608b4e;">//simulate turning off the lamp</span></div>
<div>
<span style="color: #dcdcaa;">setTimeout</span>(() <span style="color: #569cd6;">=></span> {</div>
<div>
<span style="color: #4ec9b0;">console</span>.<span style="color: #dcdcaa;">log</span>(<span style="color: #ce9178;">'***turn off the lamp***'</span>);</div>
<div>
<span style="color: #dcdcaa;">turnOffLamp</span>();</div>
<div>
}, <span style="color: #b5cea8;">20000</span>)</div>
</div>
<div style="background-color: #1e1e1e; color: #d4d4d4; font-family: Consolas, "Courier New", monospace, "Segoe UI Emoji"; font-size: 14px; line-height: 19px; white-space: pre;">
<br /></div>
<br />
Para probar, corre primero broker.js, luego controller.js y en seguida lamp.js
<br />
Te debería salir así:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdhKLy3BSZIdZ9vwuGTFBiU9DhMd4BNNkPW5Tyqgqu6lNCrNxfMqLxbJSyNIH1HziO3-jwM3NPZzER64RP9FeGR3zAF-T9kPbSo1285KBAI_ztB4pYTynOhbyRAn5p_BH0_vfl4DCF8LM/s1600/mqtt-mosca-nodejs.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="495" data-original-width="404" height="400" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdhKLy3BSZIdZ9vwuGTFBiU9DhMd4BNNkPW5Tyqgqu6lNCrNxfMqLxbJSyNIH1HziO3-jwM3NPZzER64RP9FeGR3zAF-T9kPbSo1285KBAI_ztB4pYTynOhbyRAn5p_BH0_vfl4DCF8LM/s400/mqtt-mosca-nodejs.png" width="326" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<br />Lizzy Mendivilhttp://www.blogger.com/profile/17037414623539252518noreply@blogger.com0tag:blogger.com,1999:blog-2681976894309771219.post-70819396059219126822018-06-15T13:36:00.000-04:002018-06-15T13:36:16.446-04:00How to make ng serve listen other than localhostActually, your angular app is running in:<br />
<br />
<span style="background-color: yellow;">http://localhost:4200/</span><br />
<br />
Now, you can make your angular app run in:<br />
<br />
<span style="background-color: lime;">http://172.21.19.19:8080/</span><br />
<br />
It is simply like this:<br />
<br />
<span style="background-color: #f6b26b;">ng serve --port 8080 --host 0.0.0.0 --disableHostCheck true</span><br />
<br />
That's all!Lizzy Mendivilhttp://www.blogger.com/profile/17037414623539252518noreply@blogger.com0tag:blogger.com,1999:blog-2681976894309771219.post-21211423942525924332018-06-10T12:28:00.000-04:002018-06-15T13:36:40.105-04:00How to convert .angular-cli.json to angular.json (Angular 6 Migration)<div style="text-align: right;">
<b>Error</b>: Local workspace file ('angular.json') could not be found.</div>
<br />
Well, after running the following commands for migrating an angular app 5 to angular 6, I realized that the angular-cli.json hadn't been converted as you can see in the screenshot bellow:<br />
<br />
npm install -g @angular/cli<br />
npm install @angular/cli<br />
ng update @angular/cli<br />
ng update @angular/core<br />
ng update @angular/material (I didn't execute this because I am not using Angular Material)<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEic9hG85rTBtTff5Ylc0UgEeOUy9mTscVIADmIvoGkrbEnkiFIUG9JUkNJEjksy6F4PIuiO0wDraIoMQ022_92hr8PadI6rY41o4eFQABxIr9M2E75j3mEEG76nCxvWUFyntIot5Z3Mr_0/s1600/angular.json-could-not-be-found.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="810" data-original-width="1226" height="263" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEic9hG85rTBtTff5Ylc0UgEeOUy9mTscVIADmIvoGkrbEnkiFIUG9JUkNJEjksy6F4PIuiO0wDraIoMQ022_92hr8PadI6rY41o4eFQABxIr9M2E75j3mEEG76nCxvWUFyntIot5Z3Mr_0/s400/angular.json-could-not-be-found.png" width="400" /></a></div>
<br />
<br />
So, executing this command, I fixed this error:<br />
<br />
ng update @angular/cli --from=1.7.4 --migrate-only<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYQ_FdtA7Sk3B2WUZF6nGhPJi9l2KO2i4HmEwIBka82K3AIfLSWstD7sz-R2i8ClHRBh3BvCknEdl-XCZf-XgMu_H4qxcgT1ikI-w2jpogF15zogFlLu74G_9Ay-EoOPFW0EZbvPOEIk8/s1600/fix-angular.json-could-not-be-found.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="804" data-original-width="1129" height="283" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYQ_FdtA7Sk3B2WUZF6nGhPJi9l2KO2i4HmEwIBka82K3AIfLSWstD7sz-R2i8ClHRBh3BvCknEdl-XCZf-XgMu_H4qxcgT1ikI-w2jpogF15zogFlLu74G_9Ay-EoOPFW0EZbvPOEIk8/s400/fix-angular.json-could-not-be-found.png" width="400" /></a></div>
<br />
That's it! Now, you can go ahead with *ng serve*<br />
Happy Coding!<br />
<div>
<br /></div>
Lizzy Mendivilhttp://www.blogger.com/profile/17037414623539252518noreply@blogger.com0tag:blogger.com,1999:blog-2681976894309771219.post-59947104555212337572018-05-09T13:57:00.001-04:002018-05-09T13:57:39.203-04:00ESLint - propType is not requiredEsLint rules for react
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5OLY3n3RT8FrgsJE4WZAALI2MzrCBoKaoms5U0osCBcji0Kjf4YfY5iyn2Ky7R3FawZ0d5ki-W5kVoRPzUkejw7GP44nJtrWihDlxjVkeLJ6dD-D9zcvyTVqpKGXpQW-jWnwe8P8nMX8/s1600/ESLint-propType-is-not-required-react-require-default-props.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="194" data-original-width="775" height="80" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5OLY3n3RT8FrgsJE4WZAALI2MzrCBoKaoms5U0osCBcji0Kjf4YfY5iyn2Ky7R3FawZ0d5ki-W5kVoRPzUkejw7GP44nJtrWihDlxjVkeLJ6dD-D9zcvyTVqpKGXpQW-jWnwe8P8nMX8/s320/ESLint-propType-is-not-required-react-require-default-props.png" width="320" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
If you have some props not required and ESLint displays an error message, you can add a rule or you can set a default props.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgk26Uzws_mABOxCDn204hbSSmM1z1Iad8IfnFDkhoZSmrtRYWmu1lTbpjgaGS0u3NBqGCYxrKLfIqhgrOs_Cr9Xgs3D_bZqpPJhuV5CYe8MFGVTio1YXdQFwCt4fGIRWO10nE1lKB3ea4/s1600/react-default-props.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="121" data-original-width="267" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgk26Uzws_mABOxCDn204hbSSmM1z1Iad8IfnFDkhoZSmrtRYWmu1lTbpjgaGS0u3NBqGCYxrKLfIqhgrOs_Cr9Xgs3D_bZqpPJhuV5CYe8MFGVTio1YXdQFwCt4fGIRWO10nE1lKB3ea4/s1600/react-default-props.png" /></a></div>
<br />
<br />
The ESLint rule is:<br />
<br />
<pre style="background-color: #f6f8fa; border-radius: 3px; box-sizing: border-box; color: #24292e; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 11.9px; line-height: 1.45; overflow: auto; padding: 16px; word-wrap: normal;"><code style="background: transparent; border-radius: 3px; border: 0px; box-sizing: border-box; display: inline; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 11.9px; line-height: inherit; margin: 0px; overflow: visible; padding: 0px; word-break: normal; word-wrap: normal;"> "react/require-default-props": 0,</code></pre>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiI4QApUYnGrVJ-Kqu7196Y84LPpIs7rui_xZD7ZHvLnvzw4r9VPu8NEolt7dBqRWsoQb91KvBA6xVLqirCSdI30lNj9zFrQDpVx_02Qlw3-Lli_rKjtjxFZsKbUyqa3cwB2fXeEscwb2A/s1600/ESLint-Rules-require-default-props.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="330" data-original-width="378" height="279" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiI4QApUYnGrVJ-Kqu7196Y84LPpIs7rui_xZD7ZHvLnvzw4r9VPu8NEolt7dBqRWsoQb91KvBA6xVLqirCSdI30lNj9zFrQDpVx_02Qlw3-Lli_rKjtjxFZsKbUyqa3cwB2fXeEscwb2A/s320/ESLint-Rules-require-default-props.png" width="320" /></a></div>
Lizzy Mendivilhttp://www.blogger.com/profile/17037414623539252518noreply@blogger.com0tag:blogger.com,1999:blog-2681976894309771219.post-39358218662268785892018-04-23T19:53:00.000-04:002018-06-15T13:36:59.539-04:00How to upgrade Git on Windows1. Go to <a href="https://git-scm.com/download/win">https://git-scm.com/download/win</a> and download the .exe program<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRgX5RpGWYzULH2aZzvt92DV2emJvCgqlCxWmQjRzjkoZ9DCLfZEtalDbx_qnDCyB90qWI-XYIHWJGxIlQ-GeebzrD3iRvbc6FlPCM2gPhnkhZ0rq49vwgs-qxMg5ciWl9Bek0O1po4KY/s1600/download-git-for-windows.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="708" data-original-width="980" height="231" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRgX5RpGWYzULH2aZzvt92DV2emJvCgqlCxWmQjRzjkoZ9DCLfZEtalDbx_qnDCyB90qWI-XYIHWJGxIlQ-GeebzrD3iRvbc6FlPCM2gPhnkhZ0rq49vwgs-qxMg5ciWl9Bek0O1po4KY/s320/download-git-for-windows.png" width="320" /></a></div>
<br />
<br />
2. Execute it and follow the wizard (you do not need to uninstall your previous version of git to upgraded it to the latest)<br />
3. That's it!<br />
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjO3KFH2m1IVikaiS0nL50rS_rO5LeK5P8SNjkaVWhDi4y4L9EJqr_Q4r47pW3q2R1hiCqoDFqmW62_sdSx_6orgwVJ1EvomeqK8NVawg_7DIU8e4Sx94G_NN-vLDxXj28eIRvq2Op9A30/s1600/upgrade-git-on-windows.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="352" data-original-width="365" height="308" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjO3KFH2m1IVikaiS0nL50rS_rO5LeK5P8SNjkaVWhDi4y4L9EJqr_Q4r47pW3q2R1hiCqoDFqmW62_sdSx_6orgwVJ1EvomeqK8NVawg_7DIU8e4Sx94G_NN-vLDxXj28eIRvq2Op9A30/s320/upgrade-git-on-windows.png" width="320" /></a></div>
<br />
<br />
<br />Lizzy Mendivilhttp://www.blogger.com/profile/17037414623539252518noreply@blogger.com0