Power Options for the Raspberry Pi 4

The Raspberry Pi has a few more power options than what one might gather from a quick glance. With the exception of the computer modules (which will get no further mention here) the Pis have a USB port for providing power. The Pi-4 has a USB-C port while the other units use micro-USB. In most cases having a 5-volt power supply with a the appropriate USB interface is sufficient. Using the USB interface, the Pi can be powered through a phone charger. This includes portable chargers, which might be used if the Pi needs to be placed where outlets are not available or if they must be movable. The USB port isn’t the only way to power the Pi though.

View this content in Video Form

Another way of powering the Pi is through the 40-pin connector. There are pins labeled 5V and GND. these pins are often used as a voltage output. But these pins can also be used as a voltage input. Applying appropriate voltage to these pines will power the Pi on. In addition to applying 5-volts directly, there are also Pi-hats made for interfacing to these pins. On the Pi-4 and Pi-3, just behind the Ethernet connector, there are 4 pins. These pins connect to the unused connections in the Ethernet jack. With a Power over Ethernet (PoE) hat, voltage supplied over these pins can be passed through a voltage regulator and then fed into the Pi.

Pi PoE Pins

To use this there are a few conditions that must be met. If you are considering this this solution then you will undoubtedly be using the Pi with a wired network connection. You also need a means of injecting power into the network. Some routers have this functionality build in. For routers that do not, there are various forms of PoE power injectors. With this solution a headless Pi only needs one cable for providing a network connection and a the power. Such hats are available in a number of form-factors. My preference is towards the one of the minimalist PoE adapters.

This adapter leaves many of the other pins open. If cooling is needed, the official Raspberry Pi PoE hat also has a fan.

Official Raspberry Pi PoE Hat

If you have a Pi that doesn’t support PoE, you are not out of luck! You can still take advantage of it with adapters for extracting power from the extra lines and routing it to the USB input on your Pi.

PoE Extractor with Micro-USB

Another way of powering a Pi is with batteries. While it is possible to take consumer batteries (AA or AAA batteries) and power a Pi with those, I would not suggest it. There are options available with higher capacities and other features that are worth considering. In looking at a battery solution not only might you want to consider the battery capacity, but the inclusion of a real time clock and the ability to query the power level of the batteries. The most basic solutions only provided power and a USB port for charging the battery.

Many of the solutions use 18650 batteries. So named because they are 18mm in diameter and 65mm long. These cells look a lot like enlarged AA batteries. Even if you don’t recognize them, you’ve probably encountered these batteries before in laptop computers. Unlike the diminutive consumer batteries of similar shape, these cells rate at having a nominal voltage of 3.7 volts each. With two batteries together they are able to meet and exceed the 5-volt power requirement for the Pi. Power regulation circuits within the battery adapters ensure that the power delivered to the Pi doesn’t exceed 5-volts.

Laptop battery with the contents shown.
A laptop battery that has been opened up to show the 18650 batteries from the inside.

One of my favourite is the Geekworm X728. This unit contains a real-time clock and has scripts available for probing the state of the battery. The unit allows settings for having the pi automatically startup when power is applied and shutting down when when the battery level is low. For increasing the battery capacity, additional pairs of batteries can be added to the X728-A2 . The X728-A2 is made only for connecting to the X728 and add additional batteries. Though if you have the know-how, you can connect additional batteries in parallel to the ones in the X728. The board shows the power level through three LEDS on the side. There’s also a dedicated power-button on the board for powering up and shutting down.

X728 In an Acrylic Case

In close second is the PiJuice. Right now the PiJuice is a lot more expensive than the X728 at almost twice the price. But it has an additional feature; the PiJuice allows scripts to be scheduled to run under specific power or time conditions. While the battery included with the PiJuice has lower capacity than a pair of 18650 batteries, there are use cases under which it could have longer usage before requiring a charge. On the PiJuice the Pi can be put to sleep, consuming much less power, and then wake up to perform some work and go back to sleep.

The PiJuice mounted to the back of a Pi 3B

The last battery kit I want to mention is sold under various names. When I ordered one, it was branded under GeekPi. While that specific SKU is no longer available, the same unit is available branded from MakerHawk. It is often described as a UPS (Uninterruptible Power Supply). It is the least expensive of the battery kits, costing less than half the price of either of the other two. But it doesn’t have any way for the pi to detect the battery level or a way to have the Pi react to power events. It only provides power and nothing more. Like the X728, one could connect additional batteries in parallel to increase the available energy.

UPS mounted to the underside of a Raspberry Pi 4

All of the battery solutions can also function as a UPS; if external power fails your Pi would be able to continue working. I’ve been able to keep the Pis running for hours at a time (days in the case of the Pi Juice on a wake/sleep schedule). I love the overall compactness of the the battery solutions made for the Pi. Some time in the future I plan to present one of the Pi based solutions that I made using the batteries.

Instagram LogoLinked In

Posts may contain products with affiliate links. When you make purchases using these links, we receive a small commission at no extra cost to you. Thank you for your support.

USB Networking with the Pi

 

I stumbled upon a thread in the Raspberry Pi forums about enabling networking on the USB-C port on the Raspberry Pi 4. At first glance I thought this would be about networking with a USB-C to Ethernet dongle. It’s not. It is about configuring the Raspberry Pi to present as a network adapter when connected to another device with a USB-C cable. While this might sounds like a rather pedestrian capability at first it is something that has a lot of potential. I see using this when I want to do development on the Pi and I’m in an environment in which a network isn’t available (such as when I’m on a long plane trip) or when there’s a network but I just can’t connect the Pi to it (such as on a corporate network).  Additionally since I expect my Android tablet to loose it’s ability to run Linux this provides a portable dev environment in which I can put the capabilities that I need.

The basic steps in what to do can be found on this thread posted by the user thagrol.  The steps are simple. I am re-posting the steps here.

  1. Open /boot/config.txt and add the line
    dtoverlay=dwc2
  2. Open /boot/cmdline.txt and append the following
    modules-load=dwc2,g_ether
  3. Reboot the Pi

After doing these steps when the Pi is connected to a computer the computer will see it as a networking device. If you list the network adapters on the Pi you will see a new network adapter with the name usb0.

thagrol notes that the mac address generated for both sides of this virtual network adapter will be different every time that the service is started. This can cause issues when using DHCP.   He provides a solution in the form of a script that will generate a set of MAC addresses based on a unique identifier in the Raspberry Pi.  After cloning the GIT repository for the script run it as root.

sudo ./set_id.py --test

PiMakeMAC

Once the addresses are generated they can be added to /boot/cmdline.txt. The addition will follow this format.

g_ether.host_addr=HOST_MAC_ADDRESS g_ether.dev_addr=DEVICE_MAC_ADDRESS

In my case  the additional entry will be

g_ether.host_addr=02:00:27:75:0a:a5 g_ether.dev_addr=06:00:27:75:0a:a5

I’m going to set a static IP on my pi. To do this the file /etc/dhcpcd.conf must be edited. Scrolling to the bottom of the file commented out is a demonstration of how to set a static address.

piDHCPSettings

For the USB interface I’e added two lines to the bottom of this file

interface usb0
static ip_address=10.11.12.13/24

After rebooting the Pi now shows this address for the USB network interface. I’m connecting to my pi with a Windows machine. After physically connecting the device a static IP address was set on the Windows side.

WindowsIPSettings

To ensure that things are working I started off trying to ping the device and received positive responses.

C:\Users\joel>ping 10.11.12.14

Pinging 10.11.12.14 with 32 bytes of data:
Reply from 10.11.12.14: bytes=32 time<1ms TTL=128
Reply from 10.11.12.14: bytes=32 time<1ms TTL=128
Reply from 10.11.12.14: bytes=32 time<1ms TTL=128
Reply from 10.11.12.14: bytes=32 time<1ms TTL=128

To try something a bit more functional I tried opening a folder on the Pi using Visual Studio Code running from my computer. Success!

vsRemote

In theory this could work with a phone or other mobile device. The restricting factor is whether someone’s mobile device allows changing settings on external network adapters. Many will allow communication over such adapters, but a much smaller set will allow you to change the settings.

20200507_163400.jpg
Editing a C# file on the Pi over SSH from a Chromebook

Something to note though, when using this solution on a mobile device there is a significant power drain, which makes sense; the mobile device’s battery is now working for two. There are a few ways to mitigate this but they break down to either batteries or external power. For batteries someone could add a battery to the Pi itself. There are a number of solutions that work well. I prefer PiJuice since it comes with some other options on invoking behaviours based power levels or time. Unfortunately at the time that I am writing this (during the 2020 shelter-at-home directive) this specific unit looks to be unavailable.

There are many other Pi batteries available. If you shop for one make sure that you purchase one that provides power through the headers or through pogo pens. Some provide power through the USB-C connector, which you need to keep available to act as a network connection.  Also give consideration to the connector used to charge the unit you select. You might prefer micro-USB or USB-C.  I would suggest not overclocking your Pi if it is running off of a battery. Some batteries might not be compatible with some types of cases. Ex: there is a Pi case that is essentially a heatsink that wraps the entire device. That would not work with with a power solution that uses pogo pens.

twitterLogofacebookLogo  youtubeLogo


Raspberry Pi 4


GeeekPi Raspbery Pi 4 UPS Power Supply


4PK 18650 Battery

Hearing on Online Platforms and Market Power

Today, July 29, 2020, the CEOs of four technology companies will meet virtually with a House subcommittee about their market power. Some have asserted that these companies have monopolies or near-monopolies. Time Cook of Apple, Mark Zuckerberg of Facebook, Sundar Pichai of Google, and Jeff Bezos of Amazon will be present. There was a push for Jack Dorsey of Twitter to attend from representative Jim Jordon of Ohio, but he is not expected to attend.

These companies are being investigated for their market dominance. For Apple, a key issue is that the only method of distribution to iOS devices is through the Apple App Store. While it is the case for a number of consumer devices that the device manufacturer is the only entity that can decide if an application will be available to the device (ex: Nintendo licensing games for the Switch, Sony for the Playstations, Microsoft for the Xbox) some entities have asserted that the arrangement is unfair. Most notably Spotify made a complaint about the revenue split terms for the Apple App Store and being disallowed from advertising other ways that a customer may purchase its service that do not involve Apple.

Amazon’s use of data that is has collected is in question. It’s combination of customer data, seller data, and its intelligence capabilities give it a significant advantage. Not only does Amazon sell items from third parties, it also produces its own products that compete with those providers. There is a question of it being fair.

For Facebook’s acquisition strategies are in question. And it also has a large advertising network that is being scrutinized.

Google, in addition to having the worlds most popular search engine, also has a wide advertising network. Google also gained the attention of regulators in the European Union because if its search engine giving preference to Google products for some types of searches.

Live-streaming of the hearing will be available on YouTube at the following starting at 12:00PM Eastern Time today, 29 July 2020.

Livestream/Replay

This isn’t the first hearing that the committee has had, but it will be the first one at which these CEOs have all been present. In previous hearings in which representatives from Facebook or Google have been present it hasn’t been unusual for questions to not focus on the investigation, but to also be on other topics of interest. In addition to questions on the competition practices, I expect there to be questioned on censorship, with the most recent well-known instance being the removal of a group that called themselves “American Frontline Doctors.” The group held a live stream on Monday that made claims of a cure for COVID-19, stating that masks offer no question, and made many other statements that contradict the advice of health organizations. The video was removed by Facebook, Twitter, and YouTube in addition to SquareSpace deciding to terminate their hosting agreement for the group’s site.

Previous hearings from the sub-committee are also available for viewing.

  1. Free and Diverse Press (June 11, 2019)
  2. H.R. 3942, Preventing the Sale of E-Cigarettes (June 11, 2019)
  3. Competition in Labor Markets (29 October, 2019)
  4. The perspective of the Antitrust Agencies (2019 November 13)
  5. Competitors in the Digital Economy (Jan 17, 2020)
  6. Online Platforms and Market Power (July 29, 2020)

Windows Terminal Preview

Windows_Terminal_Logo_256x256

I’ve started using the Windows Terminal preview and wish I had started sooner. Some of the functionality that is provides while simple is useful and gives a productivity boost. I’m bringing attention to the Windows Terminal because I find it so useful. The first question to answer is “What is it?”

From the name alone you might think that the Windows Terminal is yet another command line in the same ranks as the command prompt and PowerShell. This isn’t what it is. It is a new console host. The console host (c:\Windows\System32\conhost.exe)  may be something to which there’s not a lot of awareness, but it is a behind-the-scenes component that host console programs. When you start the command prompt it runs within the console host.

 

The Windows Terminal is an alternative console host. It is a program for managing various console environments in a single window with tabs.  Upon installation it is pre-configured for the Command Prompt, Powershell, and the Azure Cloud Shell. The availability of these items in a tabbed window alone is sufficient for me to find it useful. It isn’t limited to these programs though. The Windows Terminal is configurable to host other console programs through editing a JSON configuration file. There are some devices that I regularly connect to using SSH.  I’ve extended my configuration to have entries for these specific devices.  I had been previously using PUTTY for this but I find that with the Windows Terminal the process of opening a new tab into a device is easier.  The other connections are available in two clicks; one on a down-arrow on the tab, and another on the terminal to be opened.

WindowsTerminalOpenShell

Figuring out how to add items to the Windows Terminal is easy even without looking at the documentation. The Settings menu item in the drop down opens the configuration file in which you can see the entries for the PowerShell, Command Propmt, and Azure Cloud Shell.  If you wanted to add a new terminal you can copy one of the entries and makes changes.  There are a lot of other settings that haven’t been defined here. The fuller range of possible settings are published in Microsoft’s Github account.

https://github.com/microsoft/terminal/blob/master/doc/cascadia/SettingsSchema.md

A feature I find especially useful is the ability to set the a background image to the terminal The background image could be an animated GIF (I won’t do that, it is too distracting).  I have set the background images to something relevant to the terminal so that at a glance I can tell what terminal I’m looking at. For example, when I had a connection to one of my NVIDIA devices and a Raspberry Pi my windows look like the following.

terminals

I’ve made my images intentionally dark, but they can be within what ever color range is of your choosing. Color schemes for the text itself are also definable.  Custom images for icons and terminal backgrounds must be placed in one of two locations.

URI Scheme Location
ms-appdata:///Local/ %localappdata%\Packages\Microsoft.WindowsTerminal_8wekyb3d8bbwe\LocalState\
ms-appdata:///Roaming/ %localappdata%\Packages\Microsoft.WindowsTerminal_8wekyb3d8bbwe\RoamingState\

For the entry for one of my Raspberry Pi’s I’ve got the following configuration using the Roaming URI scheme to refer to a background image.

{

    "guid": "{89CF3D23-06EA-4B1E-B42D-FC61239443ED}",
    "closeOnExit": true,
    "backgroundImage": "ms-appdata:///roaming/pi.png",
    "backgroundImageOpacity": 0.75,
    "backgroundImageStrechMode": "fill",
    "name": "SSH Raspberry Pi 3 (Sense Hat)",
    "commandline": "ssh 192.168.1.192 -l pi",
    "hidden": false
}

As with many keyboard driven interfaces there are hotkeys that you can press to perform actions. Some hotkeys are predefined, but you can define your own or change the predefined commands through the same JSON file in which the terminal entries exists.

In many programs pressing shift+enter will change a program to full screen model. I wanted to have the same behaviour in Windows Terminal and made an entry in the keybindings section for this.

{"command": "togleFullScreen", "keys": "shift+enter"}

The Windows Terminal also supports the full range of Unicode characters.  To take advantage of this the shell that you are using also needs to have support for it to. Many already do but had no way of properly displaying the characters.

unicode

The Windows Terminal is available in the Microsoft Store for free or from Github.

twitterLogofacebookLogo youtubeLogo

 


 
 
Windows Powershell Cookbook



Going Text:Mastering the Power of the Command Line

Sending Text Message from .NET

SMS

I met with some others in Singapore for a project deployment, and one of the other people there wanted a snippet of information sent to him. He wanted it sent to his phone. He asked what the most popular messaging application is in the USA. While Facebook Messenger is the most popular the messaging landscape in the USA is fractured. One’s preferred messenger is going to depend on their preferences and social circle (Telegram is my favourite). Because of this SMS remains the most reliable way of sending short messages to someone. When I am traveling around the USA or in some environments (the subway, inside certain buildings) I use SMS because data service becomes incredibly spotty.

I am making an ASP.NET application for which I want to be able to send notifications to a phone with no application installation necessary.  I will be using SMS as my message transport of choice. How does an application do this? There are a few solutions. One is to subscribe to an SMS Gateway Service and use their API.  I found several companies that provide these services. But many of them do not have price information openly available; speaking to a sales agent is necessary to get the price. A few that I encountered did share their prices. I share what I found here. Note that prices are subject to change and the older this post is the more likely the pricing information is stale.

SMS Gateway Services

Vonage

Vonage offers SMS services starting at 0.0068 USD per message sent and and 0.0062 per message received. They also rent out virtual phone numbers at 0.98 USD per month. Verizon and US Cellular charge an additional fee for sending messages via long codes (0.0025 USD for Vzw and 0.0050 USD for US Cellular).  If you would like to try it out a trial level subscription is available for free. Vonage provides SDKs for several languages. They also have full code samples for each one of these languages.

  • Ruby
  • PHP
  • Python
  • .Net
  • NodeJS
  • Java
  • CLI

ClickSend

ClickSend offers a REST API for accessing their services. Like Vonage they also offer SDKs for several environments and code samples on how to perform various actions. You will find code samples and/or SDKs for

  • cURL
  • PHP
  • C#
  • Java
  • Node.JS
  • Ruby
  • Python
  • Perl
  • Go
  • Objective-C
  • Swift

Pricing is structured much differently. There are pricing tiers dependent on how many messages are sent. The pricing tiers look like the following.

  • 0.0214 USD/message up to 2,000 messages
  • 0.0153 USD/message for more than 2,000 messages
  • 0.0104 USD/message for 10k messages or more
  • 0.0076 USD/message for 100k messages or more
  • Unspecified pricing for more than 200k messages

A dedicated number is purchasable for 3.06 USD/month. Short codes cost 886.82 USD/month.

D7 Networks

D7 Networks pricing is  0.005 USD/month for sending SMS for one-way communication. For 2-way communication the fee is 2.00 USD/month + 0.012 USD/message for outbound messages and 0.00 USD for incoming messages.  While there is no SDK there is a REST API (which is easy enough to consume from most development environments).

E-mail

Provided someone can identify their service provider e-mail is an option. An advantage of using Email to send an SMS is that it is free. A downside is that when registering with your service the recipient must know the service provider. While I do not think that is a general problem there may be cases where someone does not know; such as when their phone is part of a family plan and someone else handles the service. Another possible issue is a person properly registers but later changes their service provider and does not update it within your service.

Why does a user need to know their service provider for this to work? The USA carriers have domains that that are used for sending e-SMS messages via e-mail. Appending this domain to the end of someone’s phone number results in the e-mail address that is routed to their phones.

  • AT&T – @mms.att.net
  • Boost Mobile – @myboostmobile.com
  • Cricket Wireless – @mms.cricketwireless.net
  • Google Project Fi – @msg.fi.google.com
  • Republic Wireless – @text.republicwireless.com
  • Sprint – @messaging.sprintpcs.com
  • Straight Talk – @mypicmessages.com
  • T-Mobile – @tmobile.net
  • Ting – @message.ting.com
  • Tracfone – @mmst5.tracfone.com
  • US Cellular – @mms.usc.net
  • Verizon – @vzwpix.com
  • Virgin Mobile – @vmpix.com

Sending messages in .Net is just a matter of using the SmtpClient class. The exact configuration that you need will be dependent on your mail service. For my mail service I have pre-configured the credentials in the computer’s credential store so that the information does not need to be stored in my application’s configuration.

SmtpClient mailClient = new SmtpClient("myMailServer.com")
{
     Credentials = CredentialCache.DefaultNetworkCredentials
};
var message = new MailMessage(
   "FromAddress@myserver.com", 
   "phoneMailAddress@carrierDomain.com", 
   "", //blank subject
   "test body"
);
mailClient.Send(message);
twitterLogofacebookLogo   youtubeLogo

j2i.net posts may contain products with affiliate links. When you make purchases using these links, we receive a small commission at no extra cost to you. Thank you for your support.


PRO ASP.NET CORE 3


c# 8

Introduction to SASS

SASS, or Syntactically Awesome Style Sheets, are a style sheet language that compile to CSS. I have mentioned languages that compile to another language before. TypeScript is an example. If you have used a system that compiles one language to another you may be able to guess why someone might want to make a new style sheet language that compiles to another.

SASS retains some amount of familiarity with CSS. This alternative syntax is more expressive; a developer can write less code to express the same design as the equivalent CSS. It also is not necessary to wait on browsers to have some feature to start using SASS; the layer of separation provided by the compiler allows SASS to have less dependencies on a browser supporting a set of features to be useful. In this first of a two part post I wanted o introduce some of the elements of SASS. Here I demonstrate variables, nesting, and replacement. In the second post I will focus on control structures and functions.

There are several GUI and command line solutions for compiling SASS. My preference is for the command line tool. The command line tool is easy enough to use both directly and to integrate into other build tools.  Installation using the Node Package Manager works on Windows, Linux, and macOS (though for me it does not work with the Windows Power Shell while it works fine in the command terminal).

npm install sass -g

If you would like to check if a system has sass installed and the version number type the following.

sass --version

Much like TypeScript, think of SASS as a super set of CSS. This is not 100% the case, but it is a good starting point for understanding. SASS styles might be distributed among several files, but when compiled the output will be in a single files.  SASS files will typically have the extension *.scss.  As an initial test I have created two files in a folder. One is named first.scss and the other is named second.scss. The following is the contents of first.sass:

@import 'second';
first {
font-family: Arial;
}

And of second.sass:

second{
font-family: Arial;
}

Since first.sass is my main file of this set to compile these files I am selecting first.sass as the input to the pre-processor. When the pre-processor encounters the @import keyword it will replace that line with the contents of the files whose name is specified there. Note that I did not need to include the extension to the file name here.  To compile these files I use the following command:

sass first.sass output.css

After running the command there is a new file named output.css.

second {
font-family: Arial;
}

first {
font-family: Arial;
}

Chances are that you are not going to want to issue a command at the command prompt every time you make a change to one of the SASS files.  To avoid this you can add the parameter –watch to the command line and allow it to continue to run. Every time you modify a SASS file the compiler will regenerate output.css.

sass --watch first.scss output.css

Variables

One of the first constructs that you will use in SASS is variables. Variables are recognizable from the $ prefix that they have. A variable can hold a Boolean, color, numeric, or string values. It is easy to undervalue variables at first; CSS already provide variables. Why are SASS variables needed? SASS variables are usable in places and ways in which CSS variables are not.  Some of the ways that variables can be used to create a style sheet will come up in some of the following sections. Let us look at a typical scenario first.

$primaryColor : #FF0000;
$secondaryColor: #FFFFD0;
This creates two variables that hold colors. These colors can be used within the SASS  in place of an actual color code.
body {
   color:$primaryColor;
   background-color: $secondaryColor;
}

.container > div {
   margin:1px;
   color:$secondaryColor;
   background-color: $primaryColor;
}

Variables have a scope. If a variable is declared outside of brackets it is globally accessible. If it is declared within the SASS block enveloped by brackets it is only visible to the SASS code within that block. In the following the second instance of $borderColor will cause an error from a variable not being defined. The variable of the same name declared in the first block is not within scope.

body {
   $borderColor: #0000FF;
   color:$primaryColor;
   background-color: $secondaryColor;
}

.container > div {
   margin:1px;
   color:$secondaryColor;
   background-color: $primaryColor;
   border: 1px solid $borderColor;
}

Default Values for Variables

You may make a SASS and want to allow a user to customize it through defining values for some variables. But you might not want to obligate the user to define values for all of the variables that your SASS uses. For this scenario there are default values.  To assign a variable a default values append the assignment with !default.
$primaryColor: #FF0000 !default;
The assignment occurs only if the variable is undefined or has a null values.  If there are any SASS definitions that use the variable before it is assigned a values other than its default those blocks that occur before the new assignment will not have the new values. The default would need to be overridden before it was used.  This could mean defining a variable before including the library that will be used. But there is another way that I think is cleaner.
With the @use directive a SASS library can be included and the variables to be assigned new values can be specified using the keyword “with” and a list of the variable assignments.
@use  'second' with (
   $primaryColor: #FF00FF
)

Nesting Selectors

The ability to nest selectors is a feature that in my opinion allows for much neater style sheets. It is common within CSS to have selectors based on some parent/child relationship. Here is a simple example.

.demoView {
   width:1080px;
   height:1920px;
}

.demoView .left {
   background-color: red;
}

.demoView .middle {
   background-color: green;
}

.demoView .right {
   background-color: blue;
}
While these style selectors are all related they are each in their own  own declaration independent of each other. Under SASS they could be grouped together. Each selector is referring to elements that are children of an element of the demoView class. A single demoView declaration is made in my SASS file. For selectors that are targeting children of demoView within SASS they are declared within  the demoView class selector.
.demoView {
   width:1080px;
   height:1920px;

   .left {
      background-color: red;
   }
   .middle {
      background-color: green;
   }
   .right {
      background-color: blue;
   }
}
I personally find this pleasing since the SASS’s layout is now closer to the arrangement of the elements within the HTML.

Parent Selector

The ampersand (&) character is used as a parent selector operator.  The & is replaced with what ever the parent selector is.
a {
   text-decoration: none;;
   &:hover {
      color:red;
   }
}
Here the potential use of the operator might not be entirely obvious. Think of it as performing a string replacement.
.icon {
   &-left {
      color:red;
   }
   &-right {
      color:yellow;
   }
}
This expands to the following.
.icon {
   &-left {
      color:red;
   }
   &-right {
      color:yellow;
   }
}
Not that this is the only way that a string substitution can occur. There is also the string interpolation operation.

String Interpolation

String interpolation substitutes the values of a variable into a string. String interpolation operations use #{}  with a variable name inserted between the brackets. String interpolation can be used in a selector, attribute name, or values.
$index:4;
item-#{$index} {
   color:red;
}
expands to
item-4 {
color: red;
}
The potential for this operation becomes more powerful once used within other constructs such as loops. Control structures will be the topic of the second half of this post, but I will show a brief example here.
@for $i from 1 to 4 {
   item-#{$i} {
      animation-delay: #{$i}s;
   }
}
item-1 {
   animation-delay: 1s;
}

item-2 {
   animation-delay: 2s;
}

item-3 {
   animation-delay: 3s;
}

Placeholder Selectors and @extend

Placeholder selectors look like class selectors. But they are proceeded with a % instead of a period. The first thing to note about placeholder selectors is that they do not generate any CSS output. Any selector that contains a place holder selector will not be rendered to the CSS output. At first, placeholders appear useless. The placeholder selectors are made to be used with @extend. Use @extend to import the attributes from a place holder selector into another selector.
%blockElement {
   display:block;
   width:100px;
   height:100px;
}

.redBlock {
   @extend %blockElement;
   background-color: red;
}

.greenBlock {
   @extend %blockElement;
   background-color: green;
}
This is the CSS produced by the above.
.greenBlock, .redBlock {
display: block;
width: 100px;
height: 100px;
}

.redBlock {
background-color: red;
}

.greenBlock {
background-color: green;
}
Nothing in what I have shown thus far is complex and I think it is easy to to understand the individual elements. But for a deeper understanding I think it best to start putting this information to use. Exercise one’s understanding through some simple projects to strengthen that understanding.  When the next portion of this post is published  will dive straight into control structures and functions. With those the potential to generate complex CSS from much simpler SASS increases significantly.
Until the next entry if you would like to see my other posts on HTMLrelated topics click here.
twitterLogofacebookLogo  youtubeLogo


Mastering SASS


SASS and Compass